88278

Carousel images are not rotating in bootstrap css

Question:

I am trying to implement carousel in bootstrap CSS but the carousel is not rotating,I am using HTML images in the carousel,

Here is the code:

<!--Indicators--> <ol class="carousel-indicators"> <li class="active" data-target="#myCarousel" data-slide-to="0"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2" ></li> </ol><!--End ordered list--> <!--Wrapper for slides--> <div class="carousel-inner"> <div class="item active" id="slide1"> <img src="http://placehold.it/1200x500"> <div class="carousel-caption"> <h4>Bootstrap 3</h4>

Learn how to build your first responsive website with the brand new Twiter Bootstrap3!

</div><!--End carousel caption--> </div><!--End item--> <div class="item" id="slide2"> <img src="http://placehold.it/1200x500"> <div class="carousel-caption"> <h4>Learn to code a website in 4 hours!</h4>

PSD to HTML & CSS3 is a popular Udemy course that has helped thousands of aspiring web designers launch their web design career.

</div><!--End carousel caption--> </div><!--End item--> <div class="item" id="slide3"> <img src="http://placehold.it/1200x500"> <div class="carousel-caption"> <h4>Web Hosting 101</h4>

Learn how to buy a perfect domain name and hosting package, and get your website live on the web with ease.

</div><!--End carousel caption--> </div><!--End item--> </div><!--End carousel inner--> <!--carousal controls--> <a class="left carousel-control" data-slide="prev" href="#myCarousel"><span class="icon-prev"></span></a> <a class="right carousel-control" data-slide="next" href="#myCarousel"><span class="icon-next"></span></a> </div><!--End myCrousel-->'

Where am i doing wrong??Please suggest...

Thanks, Pranay

Answer1:

<a href="http://www.bootply.com/128297" rel="nofollow">Link to Bootply</a>

The problem was that you had targeted myCarousel but hadn't set that anywhere. You needed to give a div the id of myCarousel and wrap it around your code.

Wrap this code around yours:

<div id="myCarousel" class="carousel slide"> <!-- Your code --> </div>

Answer2:

You need to add above indicators

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <img src="..." alt="..."> <div class="carousel-caption"> ... </div> </div> ... </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div>

You can get for details at <a href="http://getbootstrap.com/javascript/#carousel" rel="nofollow">http://getbootstrap.com/javascript/#carousel</a>

Thanks

Answer3:

<div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- Carousel indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- Carousel items --> <div class="carousel-inner"> <div class="active item"> <h2>Slide 1</h2> <div class="carousel-caption"> <h3>First slide label</h3>

Lorem ipsum dolor sit amet consectetur…

</div> </div> <div class="item"> <h2>Slide 2</h2> <div class="carousel-caption"> <h3>Second slide label</h3>

Aliquam sit amet gravida nibh, facilisis gravida…

</div> </div> <div class="item"> <h2>Slide 3</h2> <div class="carousel-caption"> <h3>Third slide label</h3>

Praesent commodo cursus magna vel…

</div> </div> </div> <!-- Carousel nav --> <a class="carousel-control left" href="#myCarousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="carousel-control right" href="#myCarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div>

Answer4:

It is worth noting for me, I was failing to link to the bootstrap.js files properly. If you are simply using the examples in the 4.0 beta files from <a href="https://getbootstrap.com/docs/4.0/getting-started/download/" rel="nofollow">GetBootstrap.com</a> you can likely use the following at the end of your file.

<script src="assets/js/vendor/popper.min.js"></script> <script src="dist/js/bootstrap.min.js"></script>

If you are projecting low traffic and don't want to include the files directly in your project you can use the CDN.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

Recommend

  • Extract a value from the chart, filtered by criteria in excel
  • how can upload image in codeigniter
  • can it be executed faster with big amount of data [MySQL]
  • Is a “join table” the result of a SQL JOIN, or the table between a many-to-many
  • Formatting a title for FancyBox
  • TFS 2010 Building Sharepoint 2010 Solution With Custom Outputs
  • jQuery slideshow with different delay times
  • Advantages of UI design in XAML
  • Organize database & multichoice columns by cronjob
  • Why do so many apps/frameworks keep their configuration files in an un-executed format?
  • Get IP address of user computer in C# [duplicate]
  • DNS of the server where ASP.NET application is run
  • Twitter rate limit?
  • Android in-app billing getting dialog like “item not found”
  • ASP.NET - Get website's URL without HttpContext.Current (running in background thread)
  • Cloudflare and Firebase
  • Can't re-buy in-app billing item on Google Play after it was refunded
  • “Movie Format Not Supported” on iPhone with YouTube player in a WebView
  • Shortest route between multiple points in mapkit for iphone app
  • Not able to understand the inheritance and overriding/overloading in java
  • Displaying iOS iAds only to supported countries
  • Why does Redshift need to do a full table scan to find the max value of the DIST/SORT key?
  • CUDA Debugging - VS on windows workstation, GPUs on Linux server?
  • Android - Call default browser with and redirect to a designated url
  • Persistent stty Settings?
  • Python adding lots of things to PATH. How do I stop?
  • Possible to “watch” both HAML and SASS at the same time?
  • jwtBearer bearer token with rc-1 update to ASP.Net 5
  • Can I programmatically choose the Android layout folder?
  • Should I or shouldn't I use the CachingConnectionFactory with hornetq 2.4.1
  • Email verification using google app script and google forms
  • Atlas images wrong size on iPad iOS 9
  • Reading JSON from a file using C++ REST SDK (Casablanca)
  • FB SDK and cURL: Unknown SSL protocol error in connection to graph.facebook.com:443
  • recyclerView does not call the onBindViewHolder when scroll in the view
  • Controls, properties, events and timers running in design time
  • Arrow is showed instead of the material design version hamburger icon. Why doesn't syncState in
  • Is there a mandatory requirement to switch app.yaml?
  • How do you join a server to an Active Directory (domain)?
  • UserPrincipal.Current returns apppool on IIS