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>
Related
I am using below code to make carousel having vertical images. It is not responsive i.e. it works completely fine on desktop but on reducing screen size, images are not fully visible (i.e half portion of image is not visible in carousel).
How can I remove this bug?
<div class="container ">
<div class="col-md-offset-1 col-md-11 col-sm-2 col-xs-12">
<div id="carousel-pager" class="carousel slide " data-ride="carousel" data-interval="1000">
<div class="carousel-inner vertical">
<div class="active item" style="object-fit: fill;">
<img style="object-fit: fill;" src="..." class="img-responsive" data-target="#carousel-main" data-slide-to="0" width:100>
</div>
<div class="item" style="object-fit: fill;">
<img src="..." class="img-responsive" data-target="#carousel-main" data-slide-to="1">
</div>
<div class="item" style="object-fit: fill;">
<img src="..." class="img-responsive" data-target="#carousel-main" data-slide-to="2">
</div>
</div>
<a class="left carousel-control" href="#carousel-pager" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-pager" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
You are using bootstrap, you should add the classes: d-block and mx-auto for responsiveness to all the img tags.
like so:
<img src="..." class="d-block mx-auto" data-target="#carousel-main" data-slide-to="2">
It will make them responsive.
Source: https://getbootstrap.com/docs/4.0/components/carousel/
also change all the div class="item" to div class="carousel-item"
OR use this:
<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="..." alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Third slide">
</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>
You can try this :
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
}
I have added min-width: 100%; to make image take full container.
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 am having trouble down scaling a responsive image in bootstrap using the example carousel on their website.
<div class="container">
<div class="other-div">
....
</div>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner img-fluid">
<div class="carousel-item active">
<img class="img-fluid" src="/path/1.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="img-fluid" src="/path/2.jpg" alt="Second slide">
</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>
</div>
The images appears as follows:
How the images should appear
The image is quite large around 3000x1500 px. I was hoping to scale it down to be the width of the container and an appropriate height to keep aspect ratio. ex 900/450.
The problem was that had to remove the class definitions for carousel-item and the animation elements because they were treating the imgs as flex elements. Added the following to my style.css:
.carousel-item{}
.carousel-item-next, .carousel-item-prev, .carousel-item.active
{
display:block;
}
<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>
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>