Jump to content
Sign in to follow this  
mikelamar

Carousel collapses

Recommended Posts

I've a 100% working carousel taken from here https://codepen.io/dangvanthanh/pen/AgHnB and tried to incorporate to my site but it collapses.

 

You can check it here https://codepen.io/mikelamardes/pen/oeBoxJ

 

Can someone please explain to me why is this happening and how I can fix it.

 

Thank you in advance.

 

 

Share this post


Link to post
Share on other sites

The example you provided uses Sass and you haven't added the Sass complier. You can either install and use Sass in your project, or just compile the code back to CSS using something like https://www.sassmeister.com, and use the compiled version in your project instead.

Share this post


Link to post
Share on other sites

The example you provided uses Sass and you haven't added the Sass complier. You can either install and use Sass in your project, or just compile the code back to CSS using something like https://www.sassmeister.com, and use the compiled version in your project instead.

 

Is it better to use a javascript carousel or this one?

Share this post


Link to post
Share on other sites

I tried this free js carousel

http://www.cssscript.com/responsive-carousel-plugin-pure-javascript-tour-js/

But I didn't make it work!

 

https://codepen.io/mikelamardes/pen/oeBoxJ

 

I added the links on head, the code in html but...

 

This one also uses Sass not CSS. You either need something to compile Sass or look for an alternative.

Share this post


Link to post
Share on other sites

Can you please suggest one easy enough that works similar to use it?

 

PS: Im using Brackets, should I install an addon for sass?

Edited by mikelamar

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Similar Content

    • By DonkeyWorx
      We provide a range of cartoon illustration and puzzle services so the main image on the home page is currently a montage of various images representing that. But some important voices are unconvinced and would prefer a single image - either a hero image or a carousel (which I've read no-one bothers to use so had dismissed) what are your thoughts/experience?
       
      Here's the page if you want to see the current solution - http://www.donkeyworx.com/index.shtml - feedback welcome.
       
      TIA.
       
      Paul
    • By TheTrooper
      Hi all. I'm having a problem with a carousel. Not sure why it's not working. Can anyone spot what's going wrong?


      <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Homepage</title> <!--<link rel="stylesheet" href="styles/style.css">--> <link rel="stylesheet" href="styles/bootstrap.min.css"> </head> <body> <div class="container"> <div class="navigation"> </div> <div class="content"> <!--Content start--> <div id="carousel-example-captions" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carousel-example-captions" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-captions" data-slide-to="1"></li> </ol> <div class = "carousel-inner"> <div class = "item active"> <img src = "images/beach.jpg" alt = "beach" class = "img-responsive"> </div> <div class = "item"> <img src = "images/red.jpg" alt = "red" class = "img-responsive"> </div> </div> <!--carousel end--> </div> <!--content end--> </div> <div class="homecont"> Content </div> <div class="footer"> <!--footer Start --> footer <!--footer end --> </div> <!--Container end --> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="js/bootstrap.js"></script> </body> </html> Images are attatched.

      Video is below for anyone else that wants to learn and have a go.

      https://www.youtube.com/watch?v=R0nkkXkrby0

      Any ideas?


    • By techmaverick85
      Hi guys and gals,
       
      Although I've been a 'lurker' for a while, I finally jumped in and registered.
       
      I have an issue that has got me stumped and I would be very grateful if someone might be able to assist.
       
      The website I have is here: http://smarter.uk.com/current-project (currently in dev) and I'm trying to get the carousel to change when you mouse over a thumbnail (on the left) but also to fade in.
       
      The issue I'm getting is that the first time I mouse over, the item fades in, but the second time you do it on the same item, it doesn't fade (the "opacity: 1" is 'stuck').
       
      Does anyone have any experience with this. I'm using jQuery for the fade as it needs to be as backward compatible as possible... it's frustrating as a few lines of CSS3 would have this working perfectly (on modern) browsers.
       
      Thanks in advance

      TM
    • By lozenges
      I'm using the Flexisel Jquery Carousel (http://9bitstudios.github.io/flexisel/) and I just can't seem to work out how to change the image size? I need a different image size for each carousel, can anyone help? also need to change the padding between the images, again this is driving me crazy!

      Link to site here

       
    • By wickywills
      Hello,
       
      I am trying to build an infinite, 100% width carousel, like the one seen on the BBC homepage (here). After a bit of digging around, it appears that they are using their own library called "Glow" (here) to do this, however I am unable to get any of the examples to work locally despite copy/pasting their code. My attempt can be found here. Can anyone see why my version is breaking?
       
      Help greatly appreciated!
       
      Thanks
      James
  • Recently Browsing

    No registered users viewing this page.

  • Member Statistics

    • Total Members
      57,516
    • Most Online
      4,970

    Newest Member
    Codespinner
    Joined
  • Forum Statistics

    • Total Topics
      65,729
    • Total Posts
      455,373
×