<div class="carousel slide ">
<div class="carousel-inner " data-ride="carousel" id="featured">
<div class="item active">
<img src="images/carousel-lifestyle.jpg" alt="Lifestyle Photo">
</div>
<div class="item">
<img src="images/carousel-mission.jpg" alt="Mission">
</div>
<div class="item">
<img src="images/carousel-vaccinations.jpg" alt="Vaccinations">
</div>
<div class="item">
<img src="images/carousel-fish.jpg" alt="Fish">
</div>
<div class="item">
<img src="images/carousel-exoticanimals.jpg" alt="Exotic Animals">
</div>
<a href="#featured" class="left carousel-control" data-slide="prev" role="button">
<span class="glyphicon glyphicon-chevron-left"></span> <!--Previous button-->
</a>
<a href="#featured" class="right carousel-control" data-slide="next" role="button">
<span class="glyphicon glyphicon-chevron-right"></span> <!-- Next button-->
</a>
</div>
</div>
The next and previous navigation buttons are not working, though they are evident on the screen
I can't figure out why the navigation of my carousel is not working.
You are missing id for your carousel.
<a href="#featured" class="left carousel-control" data-slide="prev" role="button">
Your navigation links are referencing to an element having id="featured" but it is not anywhere in your markup.
Add featured as id to make your slider work:
<div id="featured" class="carousel slide">
//-------^^^^^^^^ this missing id causing your slider to not work properly.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div id="featured" class="carousel slide">
<div class="carousel-inner " data-ride="carousel" id="featured">
<div class="item active">
<img src="images/carousel-lifestyle.jpg" alt="Lifestyle Photo">
</div>
<div class="item">
<img src="images/carousel-mission.jpg" alt="Mission">
</div>
<div class="item">
<img src="images/carousel-vaccinations.jpg" alt="Vaccinations">
</div>
<div class="item">
<img src="images/carousel-fish.jpg" alt="Fish">
</div>
<div class="item">
<img src="images/carousel-exoticanimals.jpg" alt="Exotic Animals">
</div>
<a href="#featured" class="left carousel-control" data-slide="prev" role="button">
<span class="glyphicon glyphicon-chevron-left"></span> <!--Previous button-->
</a>
<a href="#featured" class="right carousel-control" data-slide="next" role="button">
<span class="glyphicon glyphicon-chevron-right"></span> <!-- Next button-->
</a>
</div>
</div>
Related
I would like to use card-image-top section as a slider, especially on mobile. I will use that part as product card and i want my customers to see several images on this part. Is there an easy way to do this?
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<p class="card-text">Example Text</p>
</div>
</div>
I solved it.
<div class="card">
<div id="carouselExampleIndicators2" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="w-100" src="https://picsum.photos/1920/1080?random=4" alt="image">
</div>
<div class="carousel-item">
<img class="w-100" src="https://picsum.photos/1920/1080?random=5" alt="image">
</div>
<div class="carousel-item">
<img class="w-100" src="https://picsum.photos/1920/1080?random=6" alt="image">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators2" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators2" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
I'm using Bootstrap 4 carousel and trying to make it full width. And at first glance, it looks like full width, but then when you take a look at it at larger screens, the rest of the sliders after the first one show up as well. Just try zooming out the window.
How can I fix this?
Here's my code:
.first-slide {
background: url("https://image.ibb.co/kvhXGH/jetty_1373173_1920.jpg");
}
.carousel-item {
height: 800px;
width: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="container-fluid p-0">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel" data-interval="false">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active first-slide">
<div class="row">
<div class="col-md-6 offset-md-1">
<h1>Title</h1>
<p>Text goes here</p>
</div>
<div class="col-md-5"></div>
</div>
</div>
<div class="carousel-item first-slide">
<div class="row">
<div class="col-md-6 offset-md-1">
<h1>Title</h1>
<p>Text goes here</p>
</div>
<div class="col-md-5"></div>
</div>
</div>
<div class="carousel-item first-slide">
<div class="row">
<div class="col-md-6 offset-md-1">
<h1>Title</h1>
<p>Text goeshere</p>
</div>
<div class="col-md-5"></div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
</div>
</div>
Have you considered checking the markup on Bootstrap's website?
.carousel-item img {
max-height: 100vh;
object-fit: cover;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://image.ibb.co/kvhXGH/jetty_1373173_1920.jpg" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h5>Title</h5>
<p>Text goes here</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://image.ibb.co/kvhXGH/jetty_1373173_1920.jpg" alt="Second slide">
<div class="carousel-caption d-none d-md-block">
<h5>Title</h5>
<p>Text goes here</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://image.ibb.co/kvhXGH/jetty_1373173_1920.jpg" alt="Third slide">
<div class="carousel-caption d-none d-md-block">
<h5>Title</h5>
<p>Text goes here</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
My HTML is this:
<div class="navbar navbar-fixed-top" >
some divs inside...
</div>
<div class="filler"> </div>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="first-slide" src="<?php print(base_url('assets/images/slide-one.jpg')); ?>" alt="First slide" />
<div class="container">
<div class="carousel-caption">
<div class="main-text">TEXT 1!</div>
<div class="sub-text">subtext</div>
</div>
</div>
</div>
<div class="item">
<img class="second-slide" src="<?php print(base_url('assets/images/slide-two.jpg')); ?>" alt="Second slide">
<div class="container">
<div class="carousel-caption">
<div class="main-text">TEXT 2</div>
<div class="sub-text">subtext </div>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
CSS:
.filler {
height: 230px; //same height of class navbar.i do this so
carousel will not overlap the fixed navbar
}
The design runs OK. The top div is fixed at the top. But when I change the view to smaller or to mobile view, the carousel overlaps the fixed navbar. How will I format my css so that carousel will not overlap? Or is there another way to format this? Thank you.
I want to change the color of the left and right buttons on my carousel. I tryed with background color, but doesnt work. How do i change it?
here is my carousel code:
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-4"><img src="<?php bloginfo('template_url');?>/images/html_brand.jpg" class="img-responsive"></div>
<div class="col-xs-4"><img src="<?php bloginfo('template_url');?>/images/css_brand.jpg" class="img-responsive"></div>
<div class="col-xs-4"><img src="<?php bloginfo('template_url');?>/images/js_brand.jpg" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="<?php bloginfo('template_url');?>/images/jq_brand.jpg" class="img-responsive"></div>
<div class="col-xs-4"><img src="<?php bloginfo('template_url');?>/images/json_brand.jpg" class="img-responsive"></div>
<div class="col-xs-4"><img src="<?php bloginfo('template_url');?>/images/wp_brand.jpg" class="img-responsive"></div>
</div>
</div>
<!-- Controls-->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Change color property of this selector:
.carousel-control {
color: #bada55;
}
Default arrows are glyphicons which is text based icons. Change their color property.
For example
.glyphicon.glyphicon-chevron-right{
color:red;
}
add following css
<style>
.carousel-control.right{ opacity:1 !important;color:red;}
</style>
Hello StackOverflow I have the following code, this works with bootstrap and Pixedelic camera:
<section id="slider" class="container-fluid">
<div class="row fluid">
<div id="camera_wrap_1">
<div data-src="content/images/slider1.png"></div>
<div data-src="content/images/slider1.png"></div>
<div data-src="content/images/slider1.png"></div>
</div>
</div>
The camera runs fine is the blue image, but I want to achive this boxes over the camera wrap. Like this
Image
The white boxes needs to be aligned respect 4 columns bootstrap col-md-3 but be over the content of the camera. The blue is slider1.png is part of the content of camera plugin than is a full width image.
Here's a example o a bootstrap carousel.
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/carousel.js"></script>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://3.bp.blogspot.com/-bGl8UEECI8A/UH1o5UwxvdI/AAAAAAAABEg/L0iomiHX330/s640/old+bridge.jpg" alt="Ye olde bridge">
<div class="carousel-caption">
The old bridge
</div>
</div>
<div class="item">
<img src="http://bashooka.com/wp-content/uploads/2012/09/fantasy-landscape-15.jpg" alt="Elves land">
<div class="carousel-caption">
Elves landscape
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>