I am trying to build a page using both bootstrap and a Owl carousel, Owl carousel fit the purpose of the site rather that bootstraps version. So I got a tab structure where I want to put a carousel on each page, however all my attempts have failed. Here is my code
<div role="tabpanel">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Settings</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<div class="owl-carousel" id="owl1">
<div> content</div>
<div> content</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="profile">
<div class="owl-carousel" id="owl2">
<div> content</div>
<div> content</div>
</div>
<div role="tabpanel" class="tab-pane" id="messages">
<div class="owl-carousel" id="owl3">
<div> content</div>
<div> content</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="settings">
<div class="owl-carousel" id="owl4">
<div> content</div>
<div> content</div>
</div>
</div>
</div>
</div>
Here is my javascript
$(document).ready(function () {
$('#owl1').owlCarousel({
loop: true,
margin: 10,
responsiveClass: true,
responsive: {
0: {
items: 1,
nav: true
},
600: {
items: 1,
nav: false
},
1000: {
items: 1,
nav: true,
loop: false
}
}
});
$('#owl2').owlCarousel({
loop: true,
margin: 10,
responsiveclass: true,
responsive: {
0: {
items: 1,
nav: true
},
600: {
items: 1,
nav: false
},
1000: {
items: 1,
nav: true,
loop: false
}
}
});
$('#owl3').owlCarousel({
loop: true,
margin: 10,
responsiveclass: true,
responsive: {
0: {
items: 1,
nav: true
},
600: {
items: 1,
nav: false
},
1000: {
items: 1,
nav: true,
loop: false
}
}
});
$('#owl4').owlCarousel({
loop: true,
margin: 10,
responsiveclass: true,
responsive: {
0: {
items: 1,
nav: true
},
600: {
items: 1,
nav: false
},
1000: {
items: 1,
nav: true,
loop: false
}
}
});
//});
http://www.owlcarousel.owlgraphic.com/docs/api-events.html
First, I noticed an error in your html. You are missing a closing </div> tag for your second tab-pane. That's throwing off some of the structure of your markup.
After researching and playing around with this, it seems that this is a known issue. It stems from the fact that Bootstraps tabs are hidden initially. When you try to initialize an OwlCarousel within a hidden element, things go badly because hidden elements have no width, so Owl does not know how much space it has to work with.
My solution is to wait until a tab is shown to initialize the carousel, then destroy the carousel each time the tab is hidden. Here's my JavaScript:
$(document).ready(function () {
initialize_owl($('#owl1'));
let tabs = [
{ target: '#home', owl: '#owl1' },
{ target: '#profile', owl: '#owl2' },
{ target: '#messages', owl: '#owl3' },
{ target: '#settings', owl: '#owl4' },
];
// Setup 'bs.tab' event listeners for each tab
tabs.forEach((tab) => {
$(`a[href="${ tab.target }"]`)
.on('shown.bs.tab', () => initialize_owl($(tab.owl)))
.on('hide.bs.tab', () => destroy_owl($(tab.owl)));
});
});
function initialize_owl(el) {
el.owlCarousel({
loop: true,
margin: 10,
responsiveClass: true,
responsive: {
0: {
items: 1,
nav: true
},
600: {
items: 1,
nav: false
},
1000: {
items: 1,
nav: true,
loop: false
}
}
});
}
function destroy_owl(el) {
el.data('owlCarousel').destroy();
}
And here's a working jsFiddle.
No more JavaScript is needed than the owl carousel option.
Just replace the following lines in the bootstrap.css file and all should work well.
.tab-content > .tab-pane {
visibility: hidden;
height: 0px;
overflow:hidden;
}
.tab-content > .active {
visibility: visible;
height: auto;
overflow: visible;
}
This is the best solution:
https://www.youtube.com/watch?v=tKrt9ev4S24
.tab-content > .tab-pane{
display: block;
height: 0;
}
.tab-content > .active{
height: auto;
}
Dear friend you can put the following piece of code instead of "owl.carousel.css" until the problem is resolved.
/*
* Core Owl Carousel CSS File
* v1.3.3
*/
/* clearfix */
.owl-carousel .owl-wrapper:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
/* display none until init */
.owl-carousel{
display: none;
position: relative;
width: 100%;
-ms-touch-action: pan-y;
}
.owl-carousel .owl-wrapper{
display: none;
position: relative;
-webkit-transform: translate3d(0px, 0px, 0px);
float: left;
}
.owl-carousel .owl-wrapper-outer{
float: left;
overflow: hidden;
position: relative;
width: 200%;
}
.owl-carousel .owl-wrapper-outer.autoHeight{
-webkit-transition: height 500ms ease-in-out;
-moz-transition: height 500ms ease-in-out;
-ms-transition: height 500ms ease-in-out;
-o-transition: height 500ms ease-in-out;
transition: height 500ms ease-in-out;
}
.owl-carousel .owl-item{
float: left;
}
.owl-controls .owl-page,
.owl-controls .owl-buttons div{
cursor: pointer;
}
.owl-controls {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/* mouse grab icon */
.grabbing {
cursor:url(grabbing.png) 8 8, move;
}
/* fix */
.owl-carousel .owl-wrapper,
.owl-carousel .owl-item{
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
}
You don't need to do anything with the jQuery anymore to show owl-carousel into the bootstrap tab.
If you want to take owl-carousel into the tab then you should give same IDs to each owl carousel with same class="owl-carousel".
Codepen
jQuery(document).ready(function() {
jQuery(".owl-carousel").owlCarousel();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<div id="owl-example" class="owl-carousel">
<div> <img src="https://www.fillmurray.com/640/360"> </div>
<div> <img src="https://www.fillmurray.com/640/360"> </div>
<div> <img src="https://www.fillmurray.com/640/360"> </div>
<div> <img src="https://www.fillmurray.com/640/360"> </div>
<div> <img src="https://www.fillmurray.com/640/360"> </div>
<div><img src="https://www.fillmurray.com/640/360"> </div>
<div> <img src="https://www.fillmurray.com/640/360"> </div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="profile">
<div id="owl-example" class="owl-carousel">
<div> <img src="https://loremflickr.com/640/360"> </div>
<div> <img src="https://loremflickr.com/640/360"> </div>
<div> <img src="https://loremflickr.com/640/360"> </div>
<div> <img src="https://loremflickr.com/640/360"> </div>
<div> <img src="https://loremflickr.com/640/360"> </div>
<div> <img src="https://loremflickr.com/640/360"> </div>
<div> <img src="https://loremflickr.com/640/360"> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I have solve the problem in the way,
$("ul .nav-link").on("click", function(){
$("ul .nav-item").each(function(i,e){
$(e).find(".active").removeClass("active");
});
});
Related
I built a zoom effect that is triggered with GSAP's ScrollTrigger, it works fine but I want to slowly (scrub) zoom the image on scroll and not animate the zoom on scroll when entering the trigger.
I found a javascript solution in the comments here but I am looking for a GSAP ScrollTrigger solution but it gives a good idea what I'm looking for:
Zoom an image on scroll with javascript
This is what I have so far:
gsap.to( ".scrollimgzoom", {
duration: 3,
scrollTrigger: {
trigger: ".scrollimgzoom",
start: "top 70%",
end: "top 30%",
scrub: true,
toggleClass: "scrollimgzoomin",
markers: {
startColor: "red",
endColor: "red"
}
}
})
.animate {
width:100%;
height:100vh;
}
.scrollimgzoomcontainer {
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
}
.scrollimgzoom {
width: 100%;
height: 100%;
transition: all 1s;
}
.scrollimgzoomin {
transform: scale(1.2);
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/ScrollTrigger.min.js"></script>
<section class="animate"></section>
<section class="animate three">
<div class="container">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4">
<div class="scrollimgzoomcontainer">
<div class="scrollimgzoom" style="background: url(https://source.unsplash.com/random) no-repeat center center; background-size:cover;"></div>
</div>
</div>
<div class="col-md-4"></div>
</div>
</div>
</section>
<section class="animate"></section>
Actually the solution is very simple (thanks to Zack in the comments of my initial question) and you can find it here:
gsap.to( ".scrollimgzoom", {
scale: 2,
scrollTrigger: {
trigger: ".scrollimgzoom",
start: "top 80%",
end: "top 10%",
scrub: true,
toggleClass: "scrollimgzoomin",
markers: {
startColor: "red",
endColor: "red"
}
}
})
.animate {
width:100%;
height:100vh;
}
.scrollimgzoomcontainer {
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
}
.scrollimgzoom {
width: 100%;
height: 100%;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/ScrollTrigger.min.js"></script>
<section class="animate"></section>
<section class="animate three">
<div class="container">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4">
<div class="scrollimgzoomcontainer">
<div class="scrollimgzoom" style="background: url(https://source.unsplash.com/random) no-repeat center center; background-size:cover;"></div>
</div>
</div>
<div class="col-md-4"></div>
</div>
</div>
</section>
<section class="animate"></section>
I'm looking to build out a slider that auto cycles through individual slides, but also has a navigation that is stacked, and also a slider.
Like this:
The main issues I am running into are having that synced slider only show 1 "active" slide, and the navigation being stacked, and in it's own slider. As it auto plays through to "7" the slider on the bottom should slide over to show that one is active.
This is the closest I could hack together:
My code:
$('.slider-for').slick({
autoplay: true,
autoplaySpeed: 1000,
speed: 700,
mobileFirst: true,
slidesToScroll: 1,
slidesToShow: 1,
rows: 1,
fade: true,
swipeToSlide: true,
infinite: false,
focusOnSelect: true,
pauseOnHover: false,
arrows: false,
dots: false,
asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
autoplay: false,
autoplaySpeed: 9000,
speed: 700,
mobileFirst: true,
slidesToScroll: 1,
slidesToShow: 2,
rows: 3,
swipeToSlide: true,
infinite: false,
focusOnSelect: true,
pauseOnHover: false,
arrows: true,
dots: true,
asNavFor: '.slider-for'
});
$('.slick').slick();
var $parent = $(".slider-for");
var $nav = $(".slider-nav");
var $content = $nav.find("div");
var killit = false;
$content.on("click", function(e) {
if (!killit) {
e.stopPropagation();
var idx = $(this).data("thumb");
$parent.slick("goTo", idx - 1);
}
});
$nav.on("beforeChange", function() {
killit = true;
}).on("afterChange", function() {
killit = false;
});
body {
background: gray;
}
.slider {
font-family: Arial;
width: 500px;
display: block;
margin: 0 auto;
}
.slider h3 {
background: #fff;
color: #3498db;
font-size: 36px;
line-height: 100px;
margin: 10px;
padding: 2%;
position: relative;
text-align: center;
}
.slider .action {
display: block;
margin: 100px auto;
width: 100%;
text-align: center;
}
.slider .action a {
display: inline-block;
padding: 5px 10px;
background: #f30;
color: #fff;
text-decoration: none;
}
.slider .action a:hover {
background: #000;
}
.slick-active {
border: 1px solid red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kenwheeler.github.io/slick/slick/slick.js"></script>
<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick-theme.css"/>
<div class="slider">
<div class="slider-for">
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
<div>
<h3>3</h3>
</div>
<div>
<h3>4</h3>
</div>
<div>
<h3>5</h3>
</div>
<div>
<h3>6</h3>
</div>
<div>
<h3>7</h3>
</div>
<div>
<h3>8</h3>
</div>
<div>
<h3>9</h3>
</div>
<div>
<h3>10</h3>
</div>
<div>
<h3>11</h3>
</div>
<div>
<h3>12</h3>
</div>
</div>
<div class="slider-nav">
<div data-thumb="1">
<h3>1</h3>
</div>
<div data-thumb="2">
<h3>2</h3>
</div>
<div data-thumb="3">
<h3>3</h3>
</div>
<div data-thumb="4">
<h3>4</h3>
</div>
<div data-thumb="5">
<h3>5</h3>
</div>
<div data-thumb="6">
<h3>6</h3>
</div>
<div data-thumb="7">
<h3>7</h3>
</div>
<div data-thumb="8">
<h3>8</h3>
</div>
<div data-thumb="9">
<h3>9</h3>
</div>
<div data-thumb="10">
<h3>10</h3>
</div>
<div data-thumb="11">
<h3>11</h3>
</div>
<div data-thumb="12">
<h3>12</h3>
</div>
</div>
</div>
View on jsFiddle
The asNavFor property works perfectly if both sliders have the same row property. But because you want the second slider to have three rows you have to use an own sync-function.
First you have to prepare the children of .slider-for: Give them data-thumb attributes like the children of .slider-nav have.
After that you can get the index of the shown slide of .slider-for with that data-thumb attribute
let for_index = $(this).find('.slick-current')[0].dataset.thumb;
and calculate with it the slide index for .slider-nav. Here you have to subtract 1 from for_index because it starts with 1 instead of 0 (like an index would do).
let nav_index = Math.floor((for_index - 1) / 3);
Then you goTo that index.
$('.slider-nav').slick('goTo', nav_index);
To get it to work you have to wrap all that in an event listener (and its handler). I used the setPosition event for that because it styles the current slide on init.
Working example: (simplified for demonstration)
I changed the red border to a brighter background because the border messed up the slider, even with box-sizing: border-box (the last slide was moved to a second, hidden row and therefor not visible).
I also removed autoplaySpeed and speed for .slider-nav because autoplay and fade are set to false.
$('.slider-for').slick({
autoplay: true,
autoplaySpeed: 1000,
mobileFirst: true,
slidesToScroll: 1,
slidesToShow: 1,
rows: 1,
fade: true,
speed: 700,
swipeToSlide: true,
infinite: false,
focusOnSelect: true,
pauseOnHover: false,
arrows: false,
dots: false
});
$('.slider-nav').slick({
autoplay: false,
mobileFirst: true,
slidesToScroll: 1,
slidesToShow: 2,
rows: 3,
swipeToSlide: true,
infinite: false,
focusOnSelect: true,
pauseOnHover: false,
arrows: true,
dots: true
});
$('.slider-for').on('setPosition', function() {
let for_index = $(this).find('.slick-current')[0].dataset.thumb;
let nav_index = Math.floor((for_index - 1) / 3);
$('.slider-nav').slick('goTo', nav_index);
$('.slider-nav .slick-slide').css('background-color', 'transparent');
$('.slider-nav .slick-slide[data-slick-index="' + nav_index + '"]').css('background-color', '#aaa');
});
body {
background: gray;
}
.slider {
font-family: Arial;
width: 500px;
display: block;
margin: 0 auto;
}
.slider h3 {
background: #fff;
color: #3498db;
font-size: 36px;
line-height: 100px;
margin: 10px;
padding: 2%;
text-align: center;
transition-delay: 0s;
}
.slider .slick-dots li button::before {
font-size: 15px;
color: white;
}
.slider .slick-dots li.slick-active button::before {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kenwheeler.github.io/slick/slick/slick.js"></script>
<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick-theme.css"/>
<div class="slider">
<div class="slider-for">
<div data-thumb="1">
<h3>1</h3>
</div>
<div data-thumb="2">
<h3>2</h3>
</div>
<div data-thumb="3">
<h3>3</h3>
</div>
<div data-thumb="4">
<h3>4</h3>
</div>
<div data-thumb="5">
<h3>5</h3>
</div>
<div data-thumb="6">
<h3>6</h3>
</div>
<div data-thumb="7">
<h3>7</h3>
</div>
<div data-thumb="8">
<h3>8</h3>
</div>
<div data-thumb="9">
<h3>9</h3>
</div>
<div data-thumb="10">
<h3>10</h3>
</div>
<div data-thumb="11">
<h3>11</h3>
</div>
<div data-thumb="12">
<h3>12</h3>
</div>
</div>
<div class="slider-nav">
<div data-thumb="1">
<h3>1</h3>
</div>
<div data-thumb="2">
<h3>2</h3>
</div>
<div data-thumb="3">
<h3>3</h3>
</div>
<div data-thumb="4">
<h3>4</h3>
</div>
<div data-thumb="5">
<h3>5</h3>
</div>
<div data-thumb="6">
<h3>6</h3>
</div>
<div data-thumb="7">
<h3>7</h3>
</div>
<div data-thumb="8">
<h3>8</h3>
</div>
<div data-thumb="9">
<h3>9</h3>
</div>
<div data-thumb="10">
<h3>10</h3>
</div>
<div data-thumb="11">
<h3>11</h3>
</div>
<div data-thumb="12">
<h3>12</h3>
</div>
</div>
I tried a lot to add a class on the body when owl first item is active and remove when the last child is active.
$('.slider2').owlCarousel({
loop: false,
items: 1,
responsiveClass: true, autoplayHoverPause: true,
autoplay: false,
slideSpeed: 800,
paginationSpeed: 900,
autoplayTimeout: 3000,
navText: ["<img src='images/left.png'>", "<img src='images/right.png'>"],
onChanged: onChangedCallback
});
function onChangedCallback(event) {
if ($(".slider2 .owl-item:first-child").hasClass("active")) {
$("body").addClass("back");
}
else if ($(".slider2 .owl-item").last().hasClass("active")) {
$("body").removeClass("next");
}
}
You use the wrong callback function of Owl. If you use instead of onChange -> onDragged it works.
$('.slider2').owlCarousel({
loop: false,
items: 1,
responsiveClass: true, autoplayHoverPause: true,
autoplay: false,
slideSpeed: 800,
paginationSpeed: 900,
autoplayTimeout: 3000,
navText: ["<img src='images/left.png'>", "<img src='images/right.png'>"],
responsive: {
0: {
items: 1
},
360: {
items: 1
},
768: {
items: 2
},
1200: {
items: 5
}
}, onDragged: onChangedCallback
});
function onChangedCallback(event) {
if ($(".slider2 .owl-item").first().hasClass("active")) {
$("body").removeClass("red");
$("body").addClass("blue");
}
else if ($(".slider2 .owl-item").last().hasClass("active")) {
$("body").addClass("red");
$("body").removeClass("blue");
}
}
.red {
background: red;
}
.blue {
background: blue;
}
.carousel-wrap {
margin: 90px auto;
padding: 0 5%;
width: 80%;
position: relative;
}
/* fix blank or flashing items on carousel */
.owl-carousel .item {
position: relative;
z-index: 100;
-webkit-backface-visibility: hidden;
}
/* end fix */
.owl-nav > div {
margin-top: -26px;
position: absolute;
top: 50%;
color: #cdcbcd;
}
.owl-nav i {
font-size: 52px;
}
.owl-nav .owl-prev {
left: -30px;
}
.owl-nav .owl-next {
right: -30px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.3/assets/owl.carousel.min.css">
<body class="blue">
<div class="carousel-wrap">
<div class="slider2 owl-carousel">
<div class="item"><img src="http://placehold.it/150x150"></div>
<div class="item"><img src="http://placehold.it/150x150"></div>
<div class="item"><img src="http://placehold.it/150x150"></div>
<div class="item"><img src="http://placehold.it/150x150"></div>
<div class="item"><img src="http://placehold.it/150x150"></div>
<div class="item"><img src="http://placehold.it/150x150"></div>
<div class="item"><img src="http://placehold.it/150x150"></div>
<div class="item"><img src="http://placehold.it/150x150"></div>
<div class="item"><img src="http://placehold.it/150x150"></div>
<div class="item"><img src="http://placehold.it/150x150"></div>
<div class="item"><img src="http://placehold.it/150x150"></div>
<div class="item"><img src="http://placehold.it/150x150"></div>
</div>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.3/owl.carousel.min.js"></script>
I have a problem with multiple Flickity obj on the page. I can easly generate Flickity with slides, but there is a problem with the next ones.
Here's is the code:
I'm trying to put flickity in a bootstrap tabpanel (4 panel, each has his own Flickity).
var featuredFlkty = new Flickity('.carousel-featured', {
cellAlign: 'left',
contain: true,
draggable: true,
groupCells: 1,
pageDots: false,
lazyLoad: true
});
var topSellerFlkty = new Flickity('.carousel-top-rated', {
cellAlign: 'left',
contain: true,
draggable: true,
groupCells: 1,
pageDots: false,
lazyLoad: true
});
.carousel-section {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 85px;
background-color: $carousel-bg-color;
border-top: $gallery-border;
padding: 7.5px 0;
.main-carousel {
max-width: 100%;
height: 100%;
padding: 0 40px;
.carousel-cell {
width: 66px;
height: 100%;
#extend %center-flex-display;
background-color: $product-slider-bg-color;
display: inline-flex;
margin: 0 5px;
padding: 5px;
cursor: pointer;
img {
max-width: 100%;
height: auto;
}
&.is-selected {
opacity: 1;
}
&:not(.is-selected) {
opacity: 0.3;
}
}
}
.flickity-button {
background: $text-color;
padding: 0;
}
.flickity-button:hover {
#extend %bg-hover-animation;
}
.flickity-prev-next-button {
width: 30px;
height: 100%;
border-radius: 0;
}
/* icon color */
.flickity-button-icon {
fill: white;
}
/* position outside */
.flickity-prev-next-button.previous {
left: 5px;
}
.flickity-prev-next-button.next {
right: 5px;
}
}
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="top-rated">
<div class="tabpanel-content">
<section class="carousel-section">
<div class="main-carousel carousel-top-rated">
<div class="carousel-cell is-selected" id="carousel-top-rated-cell-1">
<img src="images/rocker-recliner.png" alt="..." />
</div>
<div class="carousel-cell" id="carousel-top-rated-cell-2">
<img src="images/black-chair.png" alt="..." />
</div>
<div class="carousel-cell" id="carousel-top-rated-cell-3">
<img src="images/Bed.png" alt="..." />
</div>
</div>
</section>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="featured">
<div class="tabpanel-content">
<section class="carousel-section">
<div class="main-carousel carousel-featured">
<div class="carousel-cell" id="carousel-featured-1">
<img src="images/rocker-recliner.png" alt="..." />
</div>
<div class="carousel-cell" id="carousel-featured-2">
<img src="images/black-chair.png" alt="..." />
</div>
<div class="carousel-cell" id="carousel-featured-3">
<img src="images/Bed.png" alt="..." />
</div>
</div>
</section>
</div>
</div>
</div>
The styling is just great. Everything works on the 1st Flickity, but on the 2nd, there are no cells, just arrows and height=0 of the viewport.
Ok, I have found the solution :)
Flickity - resize option
Fort the ones still looking for a detailed solution to this problem, here's the code I'm using which works fine on multiple galleries in the same page:
const galleries = document.querySelectorAll('.block-gallery');
galleries.forEach(gallery=> {
new Flickity(gallery, {
contain: true,
setGallerySize: true,
wrapAround: true,
imagesLoaded: true
});
});
I'm trying to create a custom slider using the Slick Slider jQuery plugin.
As I wanted to have the middle (active) image bigger than the other ones, I went with the centerMode which does just that. However, by default this mode shows partial images at the left and right edge of the slider.
Does anyone know or have an idea how to get rid of these? Thanks!
[Link to Codepen]
HTML:
<div class="col-md-12"> <!-- Text Navigation --> <div class="row hidden-phone" id="slider-thumbs">
<div class="col-lg-12">
<ul class="thumbnails">
<li class="col-lg-2">
<a class="thumbnail" id="carousel-selector-0">One</a>
</li>
<li class="col-lg-2">
<a class="thumbnail" id="carousel-selector-1">Two</a>
</li>
<li class="col-lg-2">
<a class="thumbnail" id="carousel-selector-2">Three</a>
</li>
<li class="col-lg-2">
<a class="thumbnail" id="carousel-selector-3">Four</a>
</li>
<li class="col-lg-2">
<a class="thumbnail" id="carousel-selector-4">Five</a>
</li>
</ul>
</div> </div>
<div class="row text-center slick-multislider">
<div class="item" data-slide-number="0">
<div>
<img src="http://lorempixel.com/600/350/cats/1 " class="img-responsive ">cat 1
</div>
</div>
<div class="item" data-slide-number="1">
<div>
<img src="http://lorempixel.com/600/350/cats/2 " class="img-responsive ">cat 2
</div>
</div>
<div class="item " data-slide-number="2">
<div>
<img src="http://lorempixel.com/600/350/cats/3 " class="img-responsive ">cat 3
</div>
</div>
<div class="item " data-slide-number="3">
<div>
<img src="http://lorempixel.com/600/350/cats/4 " class="img-responsive ">cat4
</div>
</div>
<div class="item " data-slide-number="4">
<div>
<img src="http://lorempixel.com/600/350/cats/5 " class="img-responsive ">cat5
</div>
</div> </div> </div> <div class="row text-center arrows"> <div class="span4" id="carousel-text"></div>
<div id="slide-content" style="display: none;">
<div id="slide-content-0">
<h2>Slider One</h2>
</div>
<div id="slide-content-1">
<h2>Slider Two</h2>
</div>
<div id="slide-content-2">
<h2>Slider Three</h2>
</div>
<div id="slide-content-3">
<h2>Slider Four</h2>
</div>
<div id="slide-content-4">
<h2>Slider Five</h2>
</div> </div> </div>
</div>
jQuery:
$('.slick-multislider').on('init', function(event, slick) {
$('#carousel-text').html($('#slide-content-0').html());
});
$('.slick-multislider').on('afterChange', function(event, slick, currentSlide) {
$('#carousel-text').html($('#slide-content-' + currentSlide).html());
});
$('.slick-multislider').slick({
slidesToShow: 3,
variableWidth: false,
centerMode: true,
centerPadding: '100px',
dots: false,
arrows: true,
appendArrows: '.arrows'
});
//Handles the carousel thumbnails
$('[id^=carousel-selector-]').click(function() {
var id_selector = $(this).attr("id");
var id = id_selector.substr(id_selector.length - 1);
var id = parseInt(id);
$('.slick-multislider').slick('slickGoTo', id, false);
});
CSS:
* {
box-sizing: border-box;
}
.slick-multislider {}
.slick-slider div {
height: 400px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
z-index: -1;
}
.slick-slider div.slick-center {
/*background: red;*/
z-index: 100;
}
.slick-slider img {
-webkit-transform: translate3d(0, 20%, 0px);
transform: translate3d(0, 20%, 0px);
}
.slick-slider .slick-center img {
-webkit-transform: scale(1.3, 1.3) translate3d(0, 15%, 20px);
transform: scale(1.3, 1.3) translate3d(0, 15%, 20px);
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.arrows {
margin: 20px auto 0 auto;
width: 400px;
}
.span4, h2 {
display: block;
float: left;
width: 200px;
height: 40px;
background: red;
color: white;
}
.slick-prev {
float: left;
}
.slick-next {
float: right;
}
.slick-arrow {
position: relative;
left: 0;
top: 0;
width: 100px;
height: 20px;
background: blue;
margin: 0 0 20px 0;
}
.slick-arrow:hover {
background: blue;
}
ul {
height: 40px;
}
li,
li.active {
list-style-type: none;
text-align: center;
text-indent: 0;
width: 10%;
height: 20px;
background-color: transparent;
border-radius: 0;
padding-bottom: 15px;
}
The solution is very simple, but poorly documented: set your centerPadding to 0.
In your case, your javascript would look like this:
$('.slick-multislider').slick({
slidesToShow: 3,
variableWidth: false,
centerMode: true,
centerPadding: '0',
dots: false,
arrows: true,
appendArrows: '.arrows'
});
Here's an updated fiddle:
http://codepen.io/anon/pen/MKVdPd