I'm trying to use the slick slider with Bootstrap5 Nav, somehow the slider is not showing up within the active tab content unless I resize the window. I've tried to arrange the sequence of embedded JavaScript, and the slider got broken instead.
It works fine with pure text but not slick slider, the problem seems to be JavaScript of Bootstrap and Slick.
Here's my code: https://codepen.io/HarperJ/pen/XWqrBem
Thanks in advance.
HTML:
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-8">
<ul class="nav solution_nav mb-5">
<li class="nav-item">
<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab_1" type="button"
role="tab" aria-selected="false">TAB 1</button>
</li>
<li class="nav-item">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab_2" type="button" role="tab"
aria-selected="false">TAB 2</button>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="tab_1" role="tabpanel">
<div class="slider slider-for">
<img src='https://images.unsplash.com/photo-1637779827592-1a6bc47d21b3?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzOTkyNzcwMg&ixlib=rb-1.2.1&q=85' alt=''>
<img src='https://images.unsplash.com/photo-1638058393863-4ae0d0075635?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzOTkyNzcwMg&ixlib=rb-1.2.1&q=85' alt=''>
<img src='https://images.unsplash.com/photo-1638588635868-cd8290af2266?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzOTkyNzc2OQ&ixlib=rb-1.2.1&q=85' alt=''>
<img src='https://images.unsplash.com/photo-1638058393863-4ae0d0075635?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzOTkyNzcwMg&ixlib=rb-1.2.1&q=85' alt=''>
</div>
<div class="slider slider-nav">
<img src='https://images.unsplash.com/photo-1637779827592-1a6bc47d21b3?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzOTkyNzcwMg&ixlib=rb-1.2.1&q=85' alt=''>
<img src='https://images.unsplash.com/photo-1638058393863-4ae0d0075635?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzOTkyNzcwMg&ixlib=rb-1.2.1&q=85' alt=''>
<img src='https://images.unsplash.com/photo-1638588635868-cd8290af2266?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzOTkyNzc2OQ&ixlib=rb-1.2.1&q=85' alt=''>
<img src='https://images.unsplash.com/photo-1638058393863-4ae0d0075635?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzOTkyNzcwMg&ixlib=rb-1.2.1&q=85' alt=''>
</div>
</div>
<div class="tab-pane fade" id="tab_2" role="tabpanel">
<div class="slider slider-for2">
<img src='https://images.unsplash.com/photo-1659427219844-d45d5a49780d?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjIwMjE3ODg&ixlib=rb-1.2.1&q=80' alt=''>
<img src='https://images.unsplash.com/photo-1660508344047-d535438fc3fa?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjIwMjE3ODg&ixlib=rb-1.2.1&q=80' alt=''>
</div>
<div class="slider slider-nav2">
<img src='https://images.unsplash.com/photo-1659427219844-d45d5a49780d?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjIwMjE3ODg&ixlib=rb-1.2.1&q=80' alt=''>
<img src='https://images.unsplash.com/photo-1660508344047-d535438fc3fa?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjIwMjE3ODg&ixlib=rb-1.2.1&q=80' alt=''>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
*,
*::before,
*::after {
box-sizing: border-box;
/* outline: 1px solid green; */
}
img {
max-width: 100%;
height: auto;
display: block;
}
.solution_nav .nav-link {
border: none;
background: none;
cursor: pointer;
position: relative;
color: #ddd;
padding: 16px 40px;
}
.solution_nav .nav-link.active{
color: #343434;
border-bottom: 1px solid #343434;
}
JS:
$(document).ready(function(){
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
slidesToShow: 4,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: true,
// centerMode: true,
centerMode: false,
focusOnSelect: true,
dots: false,
arrows: false
});
$('.slider-for2').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.slider-nav2'
});
$('.slider-nav2').slick({
slidesToShow: 4,
slidesToScroll: 1,
asNavFor: '.slider-for2',
dots: true,
// centerMode: true,
centerMode: false,
focusOnSelect: true,
dots: false,
arrows: false
});
})
You need to attach the slick to an event after the tab is shown, otherwise the element doesn't necessarily exists. The proper event is shown.bs.tab. I have set up an example to convey the idea. It isn't generalized enough, but it works.
var did_init_tab_2 = false;
const tabEl = document.querySelector('[data-bs-target="#tab_2"]')
tabEl.addEventListener('shown.bs.tab', event => {
if (did_init_tab_2) {
return;
}
did_init_tab_2 = true;
$('.slider-for2').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
});
})
$(document).ready(function() {
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
});
})
*,
*::before,
*::after {
box-sizing: border-box;
/* outline: 1px solid green; */
}
img {
max-width: 100%;
height: auto;
display: block;
}
.solution_nav .nav-link {
border: none;
background: none;
cursor: pointer;
position: relative;
color: #ddd;
padding: 16px 40px;
}
.solution_nav .nav-link.active {
color: #343434;
border-bottom: 1px solid #343434;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" integrity="sha512-yHknP1/AwR+yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZFWbhBig+X9G9eYW/8m0/4OXNx8pxJ6z57x0dw==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-8">
<ul class="nav solution_nav mb-5">
<li class="nav-item">
<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab_1" type="button" role="tab" aria-selected="false">TAB 1</button>
</li>
<li class="nav-item">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab_2" type="button" role="tab" aria-selected="false">TAB 2</button>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="tab_1" role="tabpanel">
<div class="slider slider-for">
<img src='https://images.unsplash.com/photo-1637779827592-1a6bc47d21b3?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzOTkyNzcwMg&ixlib=rb-1.2.1&q=85' alt=''>
<img src='https://images.unsplash.com/photo-1638058393863-4ae0d0075635?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzOTkyNzcwMg&ixlib=rb-1.2.1&q=85' alt=''>
<img src='https://images.unsplash.com/photo-1638588635868-cd8290af2266?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzOTkyNzc2OQ&ixlib=rb-1.2.1&q=85' alt=''>
<img src='https://images.unsplash.com/photo-1638058393863-4ae0d0075635?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzOTkyNzcwMg&ixlib=rb-1.2.1&q=85' alt=''>
</div>
</div>
<div class="tab-pane fade" id="tab_2" role="tabpanel">
<div class="slider slider-for2">
<img src='https://images.unsplash.com/photo-1659427219844-d45d5a49780d?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjIwMjE3ODg&ixlib=rb-1.2.1&q=80' alt=''>
<img src='https://images.unsplash.com/photo-1660508344047-d535438fc3fa?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjIwMjE3ODg&ixlib=rb-1.2.1&q=80' alt=''>
</div>
</div>
</div>
</div>
</div>
</div>
Related
I'm trying to recreate the SwiperJS slider from this image, they also used SwiperJS to create this
My current situation can see in the image below, I have a problem with the next and previous buttons that are overlapping slider images, what is a solution for this, how can I shrink this container a little bit so my buttons are visible as the image above
Here is the code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Slider</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Link Swiper's CSS -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css"
/>
<!-- Demo styles -->
<style>
.page-row {
max-width: 1267px;
margin: 0 auto;
}
figure {
margin: 1.4rem 0 0;
}
.swiper-slide img {
display: block;
max-width: 100%;
max-height: 100%;
height: auto;
margin: auto;
}
.swiper-container .swiper-slide a {
text-decoration: none;
}
.swiper-container .swiper-pagination .swiper-pagination-bullet {
width: 20px;
height: 3px;
opacity: .2;
border-radius: 20px;
background-color: #127749;
margin: 0 6px;
}
.swiper-container .swiper-pagination .swiper-pagination-bullet-active {
opacity: 1;
}
.swiper-button-next, .swiper-button-prev {
color: #127749;
}
.swiper-button-next:after, .swiper-button-prev:after {
font-size: 21px;
}
.swiper-container .swiper-pagination {
position: relative;
bottom: 0;
margin-top: 3px;
}
.swiper-content__wrapper-img-desktop {
display: none;
}
.swiper-content__wrapper-img-mobile {
display: block;
}
.swiper-container .swiper-slide p {
color: #333;
font-family: Helvetica,sans-serif;
font-size: 13px;
font-weight: 700;
line-height: 1.4;
margin-top: 10px;
text-transform: uppercase;
}
#media screen and (min-width: 768px) {
.swiper-container .swiper-pagination .swiper-pagination-bullet {
width: 50px;
}
.swiper-content__wrapper-img-desktop {
display: block;
}
.swiper-content__wrapper-img-mobile {
display: none;
}
}
#media screen and (min-width: 410px) {
.swiper-container .swiper-pagination .swiper-pagination-bullet {
width: 25px;
}
}
</style>
</head>
<body>
<div class="page-row">
<!-- Swiper -->
<div class="swiper-container swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="swiper-content__wrapper">
<a href=/pages/rolex-at-david-rosas>
<div class="swiper-content__wrapper-img-desktop">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/keep-exploring-landing-page_550x615_crop_center.jpg?v=1614274913" alt="">
</div>
<div class="swiper-content__wrapper-img-mobile">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/keep-exploring-landing-page_portrait_ae2f3a41-5cde-4dce-9174-61a5731a2df3_550x615_crop_center.jpg?v=1619775977" alt="">
</div>
<p>Rolex at David Rosas</p>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-content__wrapper">
<a href=/pages/rolex-at-david-rosas>
<div class="swiper-content__wrapper-img-desktop">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/keep-exploring-rolex-collection_550x615_crop_center.jpg?v=1614275003" alt="">
</div>
<div class="swiper-content__wrapper-img-mobile">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/keep-exploring-rolex-collection_portrait_550x615_crop_center.jpg?v=1619775994" alt="">
</div>
<p>Rolex Collection</p>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-content__wrapper">
<a href=/pages/rolex-at-david-rosas>
<div class="swiper-content__wrapper-img-desktop">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/keep-exploring-new-2022-watches_550x615_crop_center.jpg?v=1648639177" alt="">
</div>
<div class="swiper-content__wrapper-img-mobile">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/keep-exploring-new-2022-watches_portrait_550x615_crop_center.jpg?v=1648639227" alt="">
</div>
<p>New Watches 2022</p>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-content__wrapper">
<a href=/pages/rolex-at-david-rosas>
<div class="swiper-content__wrapper-img-desktop">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/keep_exploring_our_rolex_showrooms_landscape_06_550x615_crop_center.jpg?v=1624904926" alt="">
</div>
<div class="swiper-content__wrapper-img-mobile">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/keep_exploring_our_rolex_showrooms_portrait_06_550x615_crop_center.jpg?v=1624904992" alt="">
</div>
<p>Our History</p>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-content__wrapper">
<a href=/pages/rolex-at-david-rosas>
<div class="swiper-content__wrapper-img-desktop">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/Showroom-Keep-Exploring-landscape_550x615_crop_center.jpg?v=1624902278" alt="">
</div>
<div class="swiper-content__wrapper-img-mobile">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/Showroom-Keep-Exploring-portrait_550x615_crop_center.jpg?v=1624902292" alt="">
</div>
<p>Our Showrooms 2022</p>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-content__wrapper">
<a href=/pages/rolex-at-david-rosas>
<div class="swiper-content__wrapper-img-desktop">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/keep-exploring-servicing-your-rolex_550x615_crop_center.jpg?v=1614772380" alt="">
</div>
<div class="swiper-content__wrapper-img-mobile">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/KEEP-E_3_550x615_crop_center.jpg?v=1619776214" alt="">
</div>
<p>Servicing Your Rolex</p>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-content__wrapper">
<a href=/pages/rolex-at-david-rosas>
<div class="swiper-content__wrapper-img-desktop">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/Contact-Us-Keep-Exploring-landscape_550x615_crop_center.jpg?v=1624900776" alt="">
</div>
<div class="swiper-content__wrapper-img-mobile">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/Contact-Us-Keep-Exploring-portrait_550x615_crop_center.jpg?v=1624900783" alt="">
</div>
<p>Contact Us</p>
</a>
</div>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
</div>
<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper(".mySwiper", {
slidesPerView: 2,
spaceBetween: 30,
effect: "slide",
scrollbar: false,
loop: false,
breakpointsInverse: true,
breakpoints: {
768: {
slidesPerView: 2,
slidesPerGroup: 2,
loop: false
},
1024: {
slidesPerView: 3,
slidesPerGroup: 3,
slidesPerGroup: 1
}
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
</script>
</body>
</html>
I found the solution to the problem was positioning of .swiper-container and .page-row here is the code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Slider</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Link Swiper's CSS -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css"
/>
<style>
.page-row {
max-width: 1267px;
margin: 0 auto;
position: relative;
}
figure {
margin: 1.4rem 0 0;
}
.swiper-content__wrapper-img-desktop,
.swiper-content__wrapper-img-mobile {
position: relative;
width: 100%;
height: 100%;
}
.swiper-content__wrapper-img-desktop img,
.swiper-content__wrapper-img-mobile img {
max-width: 100%;
height: 100%;
object-fit: cover;
}
.swiper-container {
margin: 0 auto;
position: relative;
overflow: hidden;
list-style: none;
padding: 0;
z-index: 1;
}
.page-row .swiper-container {
position: unset;
margin: 0 45px;
}
.swiper-container .swiper-slide a {
text-decoration: none;
}
.swiper-container .swiper-pagination .swiper-pagination-bullet {
width: 20px;
height: 3px;
opacity: .2;
border-radius: 20px;
background-color: #127749;
margin: 0 6px;
}
.swiper-container .swiper-pagination .swiper-pagination-bullet-active {
opacity: 1;
}
.swiper-button-next, .swiper-button-prev {
color: #127749;
}
.swiper-button-next:after, .swiper-button-prev:after {
font-size: 21px;
}
.swiper-container .swiper-pagination {
position: relative;
bottom: 0;
margin-top: 3px;
}
.swiper-content__wrapper-img-desktop {
display: none;
}
.swiper-content__wrapper-img-mobile {
display: block;
}
.swiper-container .swiper-slide p {
color: #333;
font-family: Helvetica,sans-serif;
font-size: 13px;
font-weight: 700;
line-height: 1.4;
margin-top: 10px;
text-transform: uppercase;
}
#media screen and (min-width: 768px) {
.swiper-container .swiper-pagination .swiper-pagination-bullet {
width: 50px;
}
.swiper-content__wrapper-img-desktop {
display: block;
}
.swiper-content__wrapper-img-mobile {
display: none;
}
}
#media screen and (min-width: 410px) {
.swiper-container .swiper-pagination .swiper-pagination-bullet {
width: 25px;
}
}
</style>
</head>
<body>
<div class="page-row">
<!-- Swiper -->
<div class="swiper-container swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="swiper-content__wrapper">
<a href=/pages/rolex-at-david-rosas>
<div class="swiper-content__wrapper-img-desktop">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/keep-exploring-landing-page_550x615_crop_center.jpg?v=1614274913" alt="">
</div>
<div class="swiper-content__wrapper-img-mobile">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/keep-exploring-landing-page_portrait_ae2f3a41-5cde-4dce-9174-61a5731a2df3_550x615_crop_center.jpg?v=1619775977" alt="">
</div>
<p>Rolex at David Rosas</p>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-content__wrapper">
<a href=/pages/rolex-at-david-rosas>
<div class="swiper-content__wrapper-img-desktop">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/keep-exploring-rolex-collection_550x615_crop_center.jpg?v=1614275003" alt="">
</div>
<div class="swiper-content__wrapper-img-mobile">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/keep-exploring-rolex-collection_portrait_550x615_crop_center.jpg?v=1619775994" alt="">
</div>
<p>Rolex Collection</p>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-content__wrapper">
<a href=/pages/rolex-at-david-rosas>
<div class="swiper-content__wrapper-img-desktop">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/keep-exploring-new-2022-watches_550x615_crop_center.jpg?v=1648639177" alt="">
</div>
<div class="swiper-content__wrapper-img-mobile">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/keep-exploring-new-2022-watches_portrait_550x615_crop_center.jpg?v=1648639227" alt="">
</div>
<p>New Watches 2022</p>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-content__wrapper">
<a href=/pages/rolex-at-david-rosas>
<div class="swiper-content__wrapper-img-desktop">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/keep_exploring_our_rolex_showrooms_landscape_06_550x615_crop_center.jpg?v=1624904926" alt="">
</div>
<div class="swiper-content__wrapper-img-mobile">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/keep_exploring_our_rolex_showrooms_portrait_06_550x615_crop_center.jpg?v=1624904992" alt="">
</div>
<p>Our History</p>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-content__wrapper">
<a href=/pages/rolex-at-david-rosas>
<div class="swiper-content__wrapper-img-desktop">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/Showroom-Keep-Exploring-landscape_550x615_crop_center.jpg?v=1624902278" alt="">
</div>
<div class="swiper-content__wrapper-img-mobile">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/Showroom-Keep-Exploring-portrait_550x615_crop_center.jpg?v=1624902292" alt="">
</div>
<p>Our Showrooms 2022</p>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-content__wrapper">
<a href=/pages/rolex-at-david-rosas>
<div class="swiper-content__wrapper-img-desktop">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/keep-exploring-servicing-your-rolex_550x615_crop_center.jpg?v=1614772380" alt="">
</div>
<div class="swiper-content__wrapper-img-mobile">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/KEEP-E_3_550x615_crop_center.jpg?v=1619776214" alt="">
</div>
<p>Servicing Your Rolex</p>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-content__wrapper">
<a href=/pages/rolex-at-david-rosas>
<div class="swiper-content__wrapper-img-desktop">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/Contact-Us-Keep-Exploring-landscape_550x615_crop_center.jpg?v=1624900776" alt="">
</div>
<div class="swiper-content__wrapper-img-mobile">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/Contact-Us-Keep-Exploring-portrait_550x615_crop_center.jpg?v=1624900783" alt="">
</div>
<p>Contact Us</p>
</a>
</div>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
</div>
<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper(".mySwiper", {
slidesPerView: 2,
spaceBetween: 30,
effect: "slide",
scrollbar: false,
loop: false,
breakpointsInverse: true,
breakpoints: {
768: {
slidesPerView: 2,
slidesPerGroup: 2,
loop: false
},
1024: {
slidesPerView: 3,
slidesPerGroup: 3,
slidesPerGroup: 1
}
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
</script>
</body>
</html>
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 am using owl carousel it works well,
but I don't know how to show all Items
within strong tag
here is my code
<div class="pr-t-w mt-30">
<div class="title float-left"></div>
<a id="show_all" class="show_all float-right" href="#">All 15</a>
</div>
<div class="owl-carousel owl-theme">
<div class="item">
<a th:href="#{/some_page/item}">
<div class="info">
<strong>Item</strong>
<strong>Item1</strong>
<strong>Item2</strong>
<strong>Item3</strong>
<strong>Item4</strong>
<strong>Item5</strong>
<strong>Item6</strong>
</div>
</a>
</div>
</div>
and my script
<script th:src="#{/js/jquery.min.js}"></script>
<script th:src="#{/js/bootstrap.min.js}"></script>
<script th:src="#{/js/owl.carousel.min.js}"></script>
<script th:src="#{/js/main.js}"></script>
<script th:inline="javascript">
/*<![CDATA[*/
$('.owl-carousel').owlCarousel({
margin: 15,
loop: true,
autoWidth: true,
items: 4
})
/*]]>*/
</script>
it should all items on click
<a id="show_all" class="show_all float-right" href="#">All 15</a>
I found solution of my problem
I added new link to add class="owl-carousel owl-theme grid" to #apertment and wrote CSS code for this new class
<div class="pr-t-w mt-30">
<div class="title float-left"></div>
<a id="show_all" onclick="show_all" href="#">All 15</a>
<a id="hide_all" hidden="hidden" onclick="hide_all()" href="#" >carousel</a>
</div>
<div id="apartment" class="owl-carousel owl-theme">
<div class="item">
<a th:href="#{/some_page/item}">
<div class="info">
<strong>Item</strong>
<strong>Item1</strong>
<strong>Item2</strong>
<strong>Item3</strong>
<strong>Item4</strong>
<strong>Item5</strong>
<strong>Item6</strong>
</div>
</a>
</div>
</div>
here is my script
<script th:inline="javascript">
/*<![CDATA[*/
$('#apartments').owlCarousel({
margin: 15,
loop: false,
autoWidth: true,
items: 4
})
function show_all() {
$('#apartments').removeClass('owl-carousel owl-theme').addClass('owl-carousel owl-theme grid');
$('#show_all').prop("hidden", true);
$('#hide_all').prop("hidden", false);
}
function hide_all() {
$('#apartments').removeClass("owl-carousel owl-theme grid").addClass('owl-carousel owl-theme');
$('#show_all').prop("hidden", false);
$('#hide_all').prop("hidden", true);
}
/*]]>*/
</script>
and CSS
.owl-carousel.grid .owl-stage {
transform: none !important;
width: 100% !important;
display: flex;
flex-wrap: wrap;
}
.owl-carousel.grid .owl-item {
margin: 0 3% 20px !important;
width: 44%!important;
}
.owl-carousel.grid .owl-item .item {
margin: 0 auto;
}
#media screen and (max-width: 992px) {
.owl-carousel.grid .owl-carousel .owl-item {
width: 46% !important;
margin: 0 2% 20px !important;
text-align: center;
}
}
I've created a slick carousel that when someone clicks a slide, it pops up (the whole carousel and its functionality).
The problem is that, at the moment, the pop up carousel is made up of images and I need it to have videos (iframes). Do you know how can I change it to have iframes instead of links (a href)?
This is my code :
HTML:
<section class="center slider">
<div class="single">
<a href="http://placehold.it/350x300?text=1">
<img src="http://placehold.it/350x300?text=1">
</a>
</div>
<div class="single">
<a href="http://placehold.it/350x300?text=2">
<img src="http://placehold.it/350x300?text=2">
</a>
</div>
<div class="single">
<a href="http://placehold.it/350x300?text=3">
<img src="http://placehold.it/350x300?text=3">
</a>
</div>
<div class="single">
<a href="http://placehold.it/350x300?text=4">
<img src="http://placehold.it/350x300?text=4">
</a>
</div>
</section>
CSS:
.slider {
width: 50%;
margin: 100px auto;
}
.slick-slide {
margin: 0px 20px;
}
.slick-slide img {
width: 100%;
}
.slick-prev:before,
.slick-next:before {
color: black;
}
.slick-slide {
opacity: 0.5;
}
.slick-current {
opacity: 1;
}
JS:
$(document).on('ready', function() {
$('.center').slick ({
dots: true,
infinite: true,
centerMode: true,
slidesToShow: 1,
slidesToScroll: 1,
mobileFirst: true
});
$('.center').slickLightbox({
slick: {
itemSelector: 'a',
navigateByKeyboard: true,
dots: true,
infinite: true,
centerMode: true,
slidesToShow: 3,
slidesToScroll: 1,
mobileFirst: true
}
});
});
External links:
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<script src="https://mreq.github.io/slick-lightbox/dist/slick-lightbox.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="https://mreq.github.io/slick-lightbox/dist/slick-lightbox.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css">
<link rel="stylesheet" type="text/css" href="https://mreq.github.io/slick-lightbox/gh-pages/bower_components/slick-carousel/slick/slick-theme.css">
Explanation
I'm using Ken Wheeler's plugin, Slick, in order to create this carousel, but for some reason, the images inside <a> tag doesn't have a equal distance between themselves; some of them are even overlapping. Is there anything that solves it?
Code
$('.carousel').slick({
arrows: false,
autoplay: true,
autoplaySpeed: 1000,
slidesToShow: 5,
slidesToScroll: 1,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 4
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 2
}
}
]
});
.container {
margin: 0 auto;
padding: 40px;
width: 80%;
background: #419be0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css">
</head>
<body>
<div class='container'>
<div class='carousel'>
<div>
<img src="http://i.imgur.com/kkVWQR4.jpg" alt="">
</div>
<div>
<img src="http://i.imgur.com/RRWm3lB.jpg" alt="">
</div>
<div>
<img src="http://i.imgur.com/2f2pUHi.jpg" alt="">
</div>
<div>
<img src="http://i.imgur.com/7TSiIkS.jpg" alt="">
</div>
<div>
<img src="http://i.imgur.com/dXxnAnC.jpg" alt="">
</div>
<div>
<img src="http://i.imgur.com/kkVWQR4.jpg" alt="">
</div>
<div>
<img src="http://i.imgur.com/RRWm3lB.jpg" alt="">
</div>
<div>
<img src="http://i.imgur.com/2f2pUHi.jpg" alt="">
</div>
<div>
<img src="http://i.imgur.com/7TSiIkS.jpg" alt="">
</div>
<div>
<img src="http://i.imgur.com/dXxnAnC.jpg" alt="">
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
</body>
</html>
Thanks in advance,
Luiz.
$('.carousel').slick({
variableWidth: true,
...
});
variableWidth allows to use slides with different width.
To add space between slides via css you can use this:
.slick-slide {margin-right: 20px;}
The problem is that your images are shown on their original size, which can be bigger than the size of the slides.
Making the a and img fit the slides gets rid of the overlap. You can of course tweak this to have some space between the slides, center the images vertically, et cetera.
Original, but make all images fill slides
$('.carousel').slick({
arrows: false,
autoplay: true,
autoplaySpeed: 1000,
slidesToShow: 5,
slidesToScroll: 1,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 4
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 2
}
}
]
});
.container {
margin: 0 auto;
padding: 40px;
width: 80%;
background: #419be0;
}
/* new */
a, img {
display: block;
width: 100%;
height: 100%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css">
</head>
<body>
<div class='container'>
<div class='carousel'>
<div>
<img src="http://i.imgur.com/kkVWQR4.jpg" alt="">
</div>
<div>
<img src="http://i.imgur.com/RRWm3lB.jpg" alt="">
</div>
<div>
<img src="http://i.imgur.com/2f2pUHi.jpg" alt="">
</div>
<div>
<img src="http://i.imgur.com/7TSiIkS.jpg" alt="">
</div>
<div>
<img src="http://i.imgur.com/dXxnAnC.jpg" alt="">
</div>
<div>
<img src="http://i.imgur.com/kkVWQR4.jpg" alt="">
</div>
<div>
<img src="http://i.imgur.com/RRWm3lB.jpg" alt="">
</div>
<div>
<img src="http://i.imgur.com/2f2pUHi.jpg" alt="">
</div>
<div>
<img src="http://i.imgur.com/7TSiIkS.jpg" alt="">
</div>
<div>
<img src="http://i.imgur.com/dXxnAnC.jpg" alt="">
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
</body>
</html>
Original, but make all images fill slides and insert space
$('.carousel').slick({
arrows: false,
autoplay: true,
autoplaySpeed: 1000,
slidesToShow: 5,
slidesToScroll: 1,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 4
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 2
}
}
]
});
.container {
margin: 0 auto;
padding: 40px;
width: 80%;
background: #419be0;
}
/* new */
a {
display: block;
width: 100%;
height: 100%;
}
img {
display: block;
width: 90%;
height: 100%;
margin: 0 5%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css">
</head>
<body>
<div class='container'>
<div class='carousel'>
<div>
<img src="http://i.imgur.com/kkVWQR4.jpg" alt="">
</div>
<div>
<img src="http://i.imgur.com/RRWm3lB.jpg" alt="">
</div>
<div>
<img src="http://i.imgur.com/2f2pUHi.jpg" alt="">
</div>
<div>
<img src="http://i.imgur.com/7TSiIkS.jpg" alt="">
</div>
<div>
<img src="http://i.imgur.com/dXxnAnC.jpg" alt="">
</div>
<div>
<img src="http://i.imgur.com/kkVWQR4.jpg" alt="">
</div>
<div>
<img src="http://i.imgur.com/RRWm3lB.jpg" alt="">
</div>
<div>
<img src="http://i.imgur.com/2f2pUHi.jpg" alt="">
</div>
<div>
<img src="http://i.imgur.com/7TSiIkS.jpg" alt="">
</div>
<div>
<img src="http://i.imgur.com/dXxnAnC.jpg" alt="">
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
</body>
</html>
Original, but use CSS background-image and margin
This makes images fill the available space and inserts space between the images.
$('.carousel').slick({
arrows: false,
autoplay: true,
autoplaySpeed: 1000,
slidesToShow: 5,
slidesToScroll: 1,
responsive: [{
breakpoint: 1024,
settings: {
slidesToShow: 4
}
}, {
breakpoint: 600,
settings: {
slidesToShow: 3
}
}, {
breakpoint: 480,
settings: {
slidesToShow: 2
}
}]
});
.container {
margin: 0 auto;
padding: 40px;
width: 80%;
background: #419be0;
}
/* new */
.container .slick-slide {
height: 50px;
margin: 0 10px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" rel="stylesheet" />
<div class='container'>
<div class='carousel'>
<div style="background-image: url('http://i.imgur.com/kkVWQR4.jpg');">
</div>
<div style="background-image: url('http://i.imgur.com/RRWm3lB.jpg');">
</div>
<div style="background-image: url('http://i.imgur.com/2f2pUHi.jpg');">
</div>
<div style="background-image: url('http://i.imgur.com/7TSiIkS.jpg');">
</div>
<div style="background-image: url('http://i.imgur.com/dXxnAnC.jpg');">
</div>
<div style="background-image: url('http://i.imgur.com/kkVWQR4.jpg');">
</div>
<div style="background-image: url('http://i.imgur.com/RRWm3lB.jpg');">
</div>
<div style="background-image: url('http://i.imgur.com/2f2pUHi.jpg');">
</div>
<div style="background-image: url('http://i.imgur.com/7TSiIkS.jpg');">
</div>
<div style="background-image: url('http://i.imgur.com/dXxnAnC.jpg');">
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
Original, but use CSS background-image (contain) and margin
This makes images fit in the available space and inserts space between the images.
$('.carousel').slick({
arrows: false,
autoplay: true,
autoplaySpeed: 1000,
slidesToShow: 5,
slidesToScroll: 1,
responsive: [{
breakpoint: 1024,
settings: {
slidesToShow: 4
}
}, {
breakpoint: 600,
settings: {
slidesToShow: 3
}
}, {
breakpoint: 480,
settings: {
slidesToShow: 2
}
}]
});
.container {
margin: 0 auto;
padding: 40px;
width: 80%;
background: #419be0;
}
/* new */
.container .slick-slide {
height: 50px;
margin: 0 10px;
background-color: #fff;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" rel="stylesheet" />
<div class='container'>
<div class='carousel'>
<div style="background-image: url('http://i.imgur.com/kkVWQR4.jpg');">
</div>
<div style="background-image: url('http://i.imgur.com/RRWm3lB.jpg');">
</div>
<div style="background-image: url('http://i.imgur.com/2f2pUHi.jpg');">
</div>
<div style="background-image: url('http://i.imgur.com/7TSiIkS.jpg');">
</div>
<div style="background-image: url('http://i.imgur.com/dXxnAnC.jpg');">
</div>
<div style="background-image: url('http://i.imgur.com/kkVWQR4.jpg');">
</div>
<div style="background-image: url('http://i.imgur.com/RRWm3lB.jpg');">
</div>
<div style="background-image: url('http://i.imgur.com/2f2pUHi.jpg');">
</div>
<div style="background-image: url('http://i.imgur.com/7TSiIkS.jpg');">
</div>
<div style="background-image: url('http://i.imgur.com/dXxnAnC.jpg');">
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>