How to append data attribute to class using jquery - javascript

I am using bootstrap carousel and I want to append this code
data-target="#carousel" data-slide-to="0"
on a class when I hover in it so the carousel slider will change upon hovering but not sure how. Any idea?
$('.green').hover(function(){
$($this).append('data-target="#carousel" data-slide-to="0"');
});
full code can be seen here
https://jsfiddle.net/x347swLh/


Try this
$('.green').attr("data-target","#carousel");
$('.green').attr("data-slide-to","0");
and if you want to remove attr
$('.green').removeAttr("data-target");


Issue in your code
You have an additional $ sign.
$($this)
^
Your append call is only appending a text to the current element, which isn't correct, you need to add data attributes. Further, you need to close your opened quote '.
$($this).append('data-target="#carousel" data-slide-to="0"');
^ ^ ^ ^
Use the function .data() from jQuery.
$('.green').hover(function(){
$(this).data('target', '#carousel').data('slide-to', '0');
});
$(document).ready(function() {
$('.carousel').carousel({
interval: 0
});
$('.green').hover(function() {
$('.green').data("target", "#carousel");
$('.green').data("slide-to", "0");
console.log($('.green').data('target'));
});
$('.blue').hover(function() {
$('.blue').data("target", "#carousel");
$('.blue').data("slide-to", "1");
console.log($('.blue').data('target'));
});
});
.carousel-fade .carousel-inner .item {
-webkit-transition-property: opacity;
transition-property: opacity;
}
.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
opacity: 0;
}
.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
opacity: 1;
}
.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
left: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-control {
z-index: 2;
}
html,
body,
.carousel,
.carousel-inner,
.carousel-inner .item {
height: 100%;
}
.item:nth-child(1) {
background: #74C390;
}
.item:nth-child(2) {
background: #51BCE8;
}
.item:nth-child(3) {
background: #E46653;
}
.green,
.blue,
.red {
border: 1px solid #333;
float: left;
cursor: pointer;
width: 300px;
}
/*Don't use in your project!!!!*/
.as-console-wrapper {
max-height: 100% !important
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.js"></script>
<div id="carousel" class="carousel slide carousel-fade" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#carousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#carousel" data-slide="next">›</a>
</div>
<div class="green">Green</div>
<div class="blue">Blue</div>
<div class="red">Red</div>
Resources
.data()

Related

Tabs not working in Bootstrap v4.3.1 but works in v4.1.0

I have a very peculiar situation. After almost 3 hours of playing with the code, I just realized my code doesn't work on the latest version of Bootstrap v4.3.1 but works well in v4.1.0
Working JSFiddle using Bootstrap v4.1.0: https://jsfiddle.net/h1m87yr5/
Non-Working JSFiddle using Bootstrap v.4.3.1: https://jsfiddle.net/h1m87yr5/1/
Please note that the code remains the same for both versions. What could be the reason?
HTML:
<div id="exTab1" class="container">
<ul class="nav nav-pills">
<li class="active">
Overview
</li>
<li>About Us
</li>
<li>Services
</li>
<li>Contact Us
</li>
</ul>
<div class="tab-content clearfix">
<div class="tab-pane active" id="1a">
<h3>Content's background color is the same for the tab</h3>
</div>
<div class="tab-pane" id="2a">
<h3>We use the class nav-pills instead of nav-tabs which automatically creates a background color for the tab</h3>
</div>
<div class="tab-pane" id="3a">
<h3>We applied clearfix to the tab-content to rid of the gap between the tab and the content</h3>
</div>
<div class="tab-pane" id="4a">
<h3>We use css to change the background color of the content to be equal to the tab</h3>
</div>
</div>
</div>
CSS:
.nav a {
margin: 10px;
background-color: #eee;
border-radius: 2px;
padding: 7px;
}
.tab-content .tab-pane h3 {
opacity: 0;
-moz-transform: translateX(50px);
-ms-transform: translateX(50px);
-o-transform: translateX(50px);
-webkit-transform: translateX(50px);
transform: translateX(50px);
transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
}
.tab-content .active h3 {
opacity: 1;
transform: translate(0);
}
#exTab1 .tab-content {
overflow: hidden;
}
#exTab1>.tab-content>.tab-pane {
display: block;
position: absolute;
overflow: hidden;
}

Two changes in your fiddle
added the class nav-link to all li > a
changed the names of the IDs, so that they don't start with a number... so '#1a' became '#a1a'; '#2a' became '#a2a'... so on and so forth...
.nav a {
margin: 10px;
background-color: #eee;
border-radius: 2px;
padding: 7px;
}
.tab-content .tab-pane h3 {
opacity: 0;
-moz-transform: translateX(50px);
-ms-transform: translateX(50px);
-o-transform: translateX(50px);
-webkit-transform: translateX(50px);
transform: translateX(50px);
transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
}
.tab-content .active h3 {
opacity: 1;
transform: translate(0);
}
#exTab1 .tab-content {
overflow: hidden;
}
#exTab1>.tab-content>.tab-pane {
display: block;
position: absolute;
overflow: hidden;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div id="exTab1" class="container">
<ul class="nav nav-pills">
<li class="active">
<a class="nav-link active" href="#a1a" data-toggle="tab">Overview</a>
</li>
<li><a class="nav-link " href="#a2a" data-toggle="tab">About Us</a>
</li>
<li><a class="nav-link " href="#a3a" data-toggle="tab">Services</a>
</li>
<li><a class="nav-link " href="#a4a" data-toggle="tab">Contact Us</a>
</li>
</ul>
<div class="tab-content clearfix">
<div class="tab-pane active" id="a1a">
<h3>Content's background color is the same for the tab</h3>
</div>
<div class="tab-pane" id="a2a">
<h3>We use the class nav-pills instead of nav-tabs which automatically creates a background color for the tab</h3>
</div>
<div class="tab-pane" id="a3a">
<h3>We applied clearfix to the tab-content to rid of the gap between the tab and the content</h3>
</div>
<div class="tab-pane" id="a4a">
<h3>We use css to change the background color of the content to be equal to the tab</h3>
</div>
</div>
</div>

Change Bootstrap Carousel Animation Duration Using Cubic Bizer

Hello People I Work On Change Bootstrap Slides Animation Direction and I Tried To Change My Bootstrap Carousel Slides Animation But There Are Some Problems:
#media all and (transform-3d),
(-webkit-transform-3d) {
#my-carousel > .carousel-inner > .item {
-webkit-transition-property: -webkit-transform;
transition-property: transform;
}
#my-carousel > .carousel-inner > .item.next,
#my-carousel > .carousel-inner > .item.active.right {
top: 0;
left: auto;
/*default Of Bootstrap Left: 0*/
transform: translate3d(0, 100%, 0);
}
#my-carousel > .carousel-inner > .item.prev,
#my-carousel > .carousel-inner > .item.active.left {
top: 0;
transform: translate3d(0, -100%, 0);
}
#my-carousel > .carousel-inner > .item.next.left,
#my-carousel > .carousel-inner > .item.prev.right,
#my-carousel > .carousel-inner > .item.active {
top: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#my-carousel > .carousel-inner > .active {
top: 0;
}
#my-carousel > .carousel-inner > .next,
#my-carousel > .carousel-inner > .prev {
top: 0;
width: auto;
height: 100%;
}
#my-carousel > .carousel-inner > .next {
left: 0;
top: 100%;
}
#my-carousel > .carousel-inner > .prev {
left: 0;
top: -100%
}
#my-carousel > .carousel-inner > .next.left,
#my-carousel > .carousel-inner > .prev.right {
top: 0;
}
#my-carousel > .carousel-inner > .active.left {
left: 0;
top: -100%;
}
#my-carousel > .carousel-inner > .active.right {
left: 0;
top: 100%;
}
/*Animation Cubic Bizer*/
#my-carousel .carousel-inner > .item {
transition-timing-function: cubic-bezier(.24,1.01,.3,.53);
transition: 4s ease-in-out top;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="my-carousel" class="carousel slide" data-ride="carousel" data-interval="40000" data-duration="3000">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#my-carousel" data-slide-to="0" class="active"></li>
<li data-target="#my-carousel" data-slide-to="1"></li>
<li data-target="#my-carousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img alt="First slide" src="http://store6.up-00.com/2017-01/148549717954391.jpg">
<div class="carousel-caption">
<h3>Caption heading 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="item">
<img alt="Second slide" src="http://store6.up-00.com/2017-01/148549717968642.jpg">
<div class="carousel-caption">
<h3>Caption heading 2</h3>
<p>Morbi eget libero quis metus consectetur semper.</p>
</div>
</div>
<div class="item">
<img alt="Third slide" src="http://store6.up-00.com/2017-01/148549717985113.jpg">
<div class="carousel-caption">
<h3>Caption heading 3</h3>
<p>Suspendisse ullamcorper massa eget eleifend iaculis.</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#my-carousel" 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="#my-carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Note: Please Run Code Snippet In Full Screen

You just need to remove this code:
transition: 4s ease-in-out top;
and make item like this:
#my-carousel .carousel-inner > .item {
transition-timing-function: cubic-bezier(.23,1,.32,1);
transition: 4s ease-in-out top;
}
Also you need to change carousel.Constructor.TRANSITION_DURATION:
First you must get data-duration value using jQuery data() function:
var itemDurVal = $(".carousel").data("duration");
/*get data-duration value of my carousel */
Then you can change slides animation:
That synchronize transition and prevent slide to disappear before transition ends.
$.fn.carousel.Constructor.TRANSITION_DURATION = itemDurVal;
And .item transition-duration value must equal carousel.Constructor.TRANSITION_DURATION value:
$(".carousel-inner .item").css({
'-webkit-transition-duration': itemDurVal + 'ms',
'-moz-transition-duration': itemDurVal + 'ms',
'transition-duration': itemDurVal + 'ms'
});
Full code is here:
var itemDurVal = $(".carousel").data("duration"); /*get data-duration value of my carousel */
$.fn.carousel.Constructor.TRANSITION_DURATION = itemDurVal;
$(".carousel-inner .item").css({
'-webkit-transition-duration': itemDurVal + 'ms',
'-moz-transition-duration': itemDurVal + 'ms',
'transition-duration': itemDurVal + 'ms'
});
#media all and (transform-3d),
(-webkit-transform-3d) {
#my-carousel > .carousel-inner > .item {
-webkit-transition-property: -webkit-transform;
transition-property: transform;
}
#my-carousel > .carousel-inner > .item.next,
#my-carousel > .carousel-inner > .item.active.right {
top: 0;
left: auto;
/*default Of Bootstrap Left: 0*/
transform: translate3d(0, 100%, 0);
}
#my-carousel > .carousel-inner > .item.prev,
#my-carousel > .carousel-inner > .item.active.left {
top: 0;
transform: translate3d(0, -100%, 0);
}
#my-carousel > .carousel-inner > .item.next.left,
#my-carousel > .carousel-inner > .item.prev.right,
#my-carousel > .carousel-inner > .item.active {
top: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#my-carousel > .carousel-inner > .active {
top: 0;
}
#my-carousel > .carousel-inner > .next,
#my-carousel > .carousel-inner > .prev {
top: 0;
width: auto;
height: 100%;
}
#my-carousel > .carousel-inner > .next {
left: 0;
top: 100%;
}
#my-carousel > .carousel-inner > .prev {
left: 0;
top: -100%
}
#my-carousel > .carousel-inner > .next.left,
#my-carousel > .carousel-inner > .prev.right {
top: 0;
}
#my-carousel > .carousel-inner > .active.left {
left: 0;
top: -100%;
}
#my-carousel > .carousel-inner > .active.right {
left: 0;
top: 100%;
}
/*Animation Cubic Bizer*/
#my-carousel .carousel-inner > .item {
transition-timing-function: cubic-bezier(.24,1.01,.3,.53);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="my-carousel" class="carousel slide" data-ride="carousel" data-interval="40000" data-duration="3000">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#my-carousel" data-slide-to="0" class="active"></li>
<li data-target="#my-carousel" data-slide-to="1"></li>
<li data-target="#my-carousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img alt="First slide" src="http://store6.up-00.com/2017-01/148549717954391.jpg">
<div class="carousel-caption">
<h3>Caption heading 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="item">
<img alt="Second slide" src="http://store6.up-00.com/2017-01/148549717968642.jpg">
<div class="carousel-caption">
<h3>Caption heading 2</h3>
<p>Morbi eget libero quis metus consectetur semper.</p>
</div>
</div>
<div class="item">
<img alt="Third slide" src="http://store6.up-00.com/2017-01/148549717985113.jpg">
<div class="carousel-caption">
<h3>Caption heading 3</h3>
<p>Suspendisse ullamcorper massa eget eleifend iaculis.</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#my-carousel" 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="#my-carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

Have you tried to delete the CSS? You will get the CSS from bootstrap automatically.
If you want to override Bootstraps CSS try to put !important after the line in CSS.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="my-carousel" class="carousel slide" data-ride="carousel" data-interval="40000" data-duration="3000">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#my-carousel" data-slide-to="0" class="active"></li>
<li data-target="#my-carousel" data-slide-to="1"></li>
<li data-target="#my-carousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img alt="First slide" src="http://store6.up-00.com/2017-01/148549717954391.jpg">
<div class="carousel-caption">
<h3>Caption heading 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="item">
<img alt="Second slide" src="http://store6.up-00.com/2017-01/148549717968642.jpg">
<div class="carousel-caption">
<h3>Caption heading 2</h3>
<p>Morbi eget libero quis metus consectetur semper.</p>
</div>
</div>
<div class="item">
<img alt="Third slide" src="http://store6.up-00.com/2017-01/148549717985113.jpg">
<div class="carousel-caption">
<h3>Caption heading 3</h3>
<p>Suspendisse ullamcorper massa eget eleifend iaculis.</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#my-carousel" 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="#my-carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

3-columns carousel slider black and white centered image

I use the following carousel slider and I want left and right image to be black & white except from centered image. I have to use the following css3: -webkit-filter: grayscale(100%); filter: grayscale(100%);
Where should I write it?
<div class="container-fluid"> <!-- "container-fluid" -->
<div class="row">
<div class="col-md-12 center-block">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-4"><img src="../images/01.jpg" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="../images/02.jpg" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="../images/03.jpg" class="img-responsive"></div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev" style=""><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>
</div> <!-- row -->
</div> <!-- container fluid -->
<script>
$(document).ready(function () {
$('#myCarousel').carousel({
interval: 10000
})
$('.carousel .item').each(function () {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length > 0) {
next.next().children(':first-child').clone().appendTo($(this));
} else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
});
</script>
<style>
.carousel {
overflow: hidden;
}
.carousel-inner {
width: 150%;
left: -25%;
}
.carousel-inner > .item.next,
.carousel-inner > .item.active.right {
left: 0;
-webkit-transform: translate3d(33%, 0, 0);
transform: translate3d(33%, 0, 0);
}
.carousel-inner > .item.prev,
.carousel-inner > .item.active.left {
left: 0;
-webkit-transform: translate3d(-33%, 0, 0);
transform: translate3d(-33%, 0, 0);
}
.carousel-control.left, .carousel-control.right {
background: rgba(255, 255, 255, 0.3);
width: 25%;
}
</style>

Try to add:
.item > div:first-child img,
.item > div:last-child img {
-webkit-filter: grayscale(100%); filter: grayscale(100%);
}
Test the result:
$(document).ready(function () {
$('#myCarousel').carousel({
interval: 10000
})
$('.carousel .item').each(function () {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length > 0) {
next.next().children(':first-child').clone().appendTo($(this));
} else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
});
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
.carousel {
overflow: hidden;
}
.carousel-inner {
width: 150%;
left: -25%;
}
.carousel-inner > .item.next,
.carousel-inner > .item.active.right {
left: 0;
-webkit-transform: translate3d(33%, 0, 0);
transform: translate3d(33%, 0, 0);
}
.carousel-inner > .item.prev,
.carousel-inner > .item.active.left {
left: 0;
-webkit-transform: translate3d(-33%, 0, 0);
transform: translate3d(-33%, 0, 0);
}
.carousel-control.left, .carousel-control.right {
background: rgba(255, 255, 255, 0.3);
width: 25%;
}
.item > div:first-child img,
.item > div:last-child img {
-webkit-filter: grayscale(100%); filter: grayscale(100%);
}
<div class="container-fluid"> <!-- "container-fluid" -->
<div class="row">
<div class="col-md-12 center-block">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-4"><img src="http://glebkema.ru/images/2015_09_20_iphone_155_x400.jpg" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://glebkema.ru/images/2015_09_20_iphone_155_x400.jpg" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://glebkema.ru/images/2015_09_20_iphone_155_x400.jpg" class="img-responsive"></div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev" style=""><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div> <!-- row -->
</div> <!-- container fluid -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

getting previous and next photos to show up in bootstrap carousel

Image of my carousel:
Hey guys, I'm trying to get my previous/next photos in my carousel to be edge (so you can see three photos, but only half of the first and third photo) to edge with a 10px gap in between. Can't find a way to do this. I've gotten as far as setting the height of the carousel and centering the image. Now if I could just get the other images to slide up next to the displayed image!
Thank you guys!
<script>
$(document).ready(function() {
$('#carousel-example-generic').carousel({
interval: 10000
})
$('.carousel .item').each(function() {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length > 0) {
next.next().children(':first-child').clone().appendTo($(this));
} else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
});
</script>
.carousel-inner {
height: 515px;
}
.item {
height: 515px;
}
.carousel-inner .item img {
position: relative;
top: 50%;
transform: translateY(-50%);
height: 515px;
margin: 0 auto;
}
.carousel {
overflow: hidden;
}
.carousel-inner {
width: 150%;
left: -25%;
}
.carousel-inner > .item.next,
.carousel-inner > .item.active.right {
-webkit-transform: translate3d(33%, 0, 0);
transform: translate3d(33%, 0, 0);
}
.carousel-inner > .item.prev,
.carousel-inner > .item.active.left {
-webkit-transform: translate3d(-33%, 0, 0);
transform: translate3d(-33%, 0, 0);
}
.carousel-control.left,
.carousel-control.right {
background: rgba(255, 255, 255, 0.3);
width: 20%;
}
<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" role="listbox">
<div class="item active">
<img src="assets/img/carousel-1.jpg" alt="...">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="assets/img/carousel-2.jpg" alt="...">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="assets/img/carousel-3.jpg" alt="...">
<div class="carousel-caption">
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

Jquery / Bootstrap 3 Slider (Moving individual items)

JSFiddle of Problem
I have a slider that i picked off another post which had a very similar question. The aim of the slider was to have multiple elements on screen at once, rather than one. These would then move one by one off screen, being replaced by another.
Example
1 - 2 - 3 - 4 - 5 - 6 >>> 2 - 3 - 4 - 5 - 6 - 7 >>> 3 - 4 - 5 - 6 - 7 - 8
Currently, the slider moves the entire row at once, rather than just sliding one to the right / left. Any help would be appreciated.
Thanks
html:
<!DOCTYPE html>
<html>
<head>
<title> Spotlight Productions </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link rel="icon" type="image/png" href="img/favicon2.png">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<link href='http://fonts.googleapis.com/css?family=Raleway:400,300,500,800,700,600,200' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
<link href = "css/styles.css" rel = "stylesheet">
</head>
<body style = "background-color: green">
<div class="col-sm-12">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-sm-2"><img src="http://placehold.it/500/e499e4/fff&text=1" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-sm-2"><img src="http://placehold.it/500/e477e4/fff&text=2" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-sm-2"><img src="http://placehold.it/500/eeeeee&text=3" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-sm-2"><img src="http://placehold.it/500/f4f4f4&text=4" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-sm-2"><img src="http://placehold.it/500/f566f5/333&text=5" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-sm-2"><img src="http://placehold.it/500/f477f4/fff&text=6" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-sm-2"><img src="http://placehold.it/500/eeeeee&text=7" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-sm-2"><img src="http://placehold.it/500/fcfcfc/333&text=8" class="img-responsive"></div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</body>
</html>
CSS
/** Client Slider **/
.carousel-inner .active.left { left: -16%; }
.carousel-inner .next { left: 16%; }
.carousel-control.left,.carousel-control.right {background-image:none;}
.col-sm-2 {width: 16%;}
Javascript
$(document).ready(function(){
$('#myCarousel').carousel({
interval: 2000
})
$('.carousel .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i=0;i<4;i++) {
next=next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
});

You started your CSS the right way but missed some "100%" appearances. So everywhere bootstrap uses a "100%" positioning or transformation you just replace it with your "16%":
/** Client Slider **/
.carousel-control.left,.carousel-control.right {background-image:none;}
.col-sm-2 {width: 16%;}
#media all and (transform-3d), (-webkit-transform-3d) {
#myCarousel .carousel-inner > .item.next,
#myCarousel .carousel-inner > .item.active.right {
left: 0;
-webkit-transform: translate3d(16%, 0, 0);
transform: translate3d(16%, 0, 0);
}
#myCarousel .carousel-inner > .item.prev,
#myCarousel .carousel-inner > .item.active.left {
left: 0;
-webkit-transform: translate3d(-16%, 0, 0);
transform: translate3d(-16%, 0, 0);
}
#myCarousel .carousel-inner > .item.next.left,
#myCarousel .carousel-inner > .item.prev.right,
#myCarousel .carousel-inner > .item.active {
left: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#myCarousel .carousel-inner > .active {
left: 0;
}
#myCarousel .carousel-inner > .next {
left: 16%;
}
#myCarousel .carousel-inner > .prev {
left: -16%;
}
#myCarousel .carousel-inner > .next.left,
#myCarousel .carousel-inner > .prev.right {
left: 0;
}
#myCarousel .carousel-inner > .active.left {
left: -16%;
}
#myCarousel .carousel-inner > .active.right {
left: 16%;
}
The updated fiddle

Categories

Resources