Related
I have slick slider implemented on a module and here's a summary of how I'm wanting it to function:
<= 767px screen width: show dots (no arrows) and 1 slide.
>= 768px: hide dots, show custom arrows and show 2 slides.
>= 992px: Show 2.5 slides with no dots, and custom arrows (should inherit from above breakpoint settings).
>= 1200px: Show 3.2 slides
>= 1600px: Show 3.5 slides
Current behaviour
The default setting works. It shows the dots and one slide for <= 767px. However, when I test on a iPad (768px), it removes the dots (which is good), shows the arrows (which is good), but still only shows the 1 slide, when I have 2 defined. Then on anything above this width, it is still showing one slide.
I have mobileFirst: true defined, so unsure why it's like this?
See demo here:
$(function() {
var $slider = $("#section-slick");
var slickOptions = {
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
dots: true,
// infinite: true,
mobileFirst: true,
autoplay: false,
fade: true,
responsive: [{
breakpoint: 767,
settings: {
slidesToShow: 2,
prevArrow: $(".section__nav-prev"),
nextArrow: $(".section__nav-next"),
mobileFirst: false,
arrows: true,
dots: false,
infinite: false,
}
},
{
breakpoint: 991,
settings: {
slidesToShow: 2.5,
}
},
{
breakpoint: 1199,
settings: {
slidesToShow: 3.2,
}
},
{
breakpoint: 1599,
settings: {
slidesToShow: 3.5,
}
}
]
};
$($slider).slick(slickOptions);
$(window).on('resize orientationchange', function() {
$($slider).slick("resize");
});
});
:root {
--black: #000000;
--white: #FFFFFF;
--grey: #707070;
--green: #00FF97;
}
section__nav {
display: flex;
align-items: center;
justify-content: center;
padding: 50px 0;
}
section__nav-next {
margin-left: 26px;
}
section__nav-arrow {
cursor: pointer;
}
section__nav-arrow svg:hover path {
fill: var(--green);
}
section__nav-arrow.slick-disabled {
opacity: 0.3;
pointer-events: none;
}
section figure {
padding: 50px;
background-color: var(--black);
color: var(--white);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></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 href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<section class="section">
<div class="container d-none d-md-block">
<div class="row justify-content-end">
<div class="col-2">
<div class="section__nav">
<div class="section__nav-arrow section__nav-prev">
<svg xmlns="http://www.w3.org/2000/svg" width="13.503" height="23.619" viewBox="0 0 13.503 23.619">
<path data-name="Icon ionic-ios-arrow-back" d="M15.321,18l8.937-8.93a1.688,1.688,0,0,0-2.391-2.384L11.742,16.8a1.685,1.685,0,0,0-.049,2.327L21.86,29.321a1.688,1.688,0,0,0,2.391-2.384Z" transform="translate(-11.251 -6.194)" />
</svg>
</div>
<div class="section__nav-arrow section__nav-next">
<svg xmlns="http://www.w3.org/2000/svg" width="13.503" height="23.619" viewBox="0 0 13.503 23.619">
<path data-name="Icon ionic-ios-arrow-back" d="M20.683,18,11.746,9.07a1.688,1.688,0,0,1,2.391-2.384L24.262,16.8a1.685,1.685,0,0,1,.049,2.327L14.144,29.321a1.688,1.688,0,0,1-2.391-2.384Z" transform="translate(-11.251 -6.194)" />
</svg>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12">
<div id="section-slick">
<figure>Card 1</figure>
<figure>Card 2</figure>
<figure>Card 3</figure>
<figure>Card 4</figure>
</div>
</div>
</div>
</div>
</section>
Problems & Fixes
included missing slick CSS
removed fade: true property
added breakpoint: 480
$(function() {
var $slider = $("#section-slick");
var slickOptions = {
prevArrow: $(".section__nav-prev"),
nextArrow: $(".section__nav-next"),
mobileFirst: true,
autoplay: false,
responsive: [{
breakpoint: 480,
settings: {
slidesToShow: 1,
arrows: false,
dots: true,
infinite: false,
mobileFirst: true,
}
}, {
breakpoint: 767,
settings: {
slidesToShow: 2,
}
},
{
breakpoint: 991,
settings: {
slidesToShow: 2.5,
}
},
{
breakpoint: 1199,
settings: {
slidesToShow: 3.2,
}
},
{
breakpoint: 1599,
settings: {
slidesToShow: 3.5,
}
}
]
};
$slider.slick(slickOptions);
});
:root {
--black: #000000;
--white: #FFFFFF;
--grey: #707070;
--green: #00FF97;
}
section__nav {
display: flex;
align-items: center;
justify-content: center;
padding: 50px 0;
}
section__nav-next {
margin-left: 26px;
}
section__nav-arrow {
cursor: pointer;
}
section__nav-arrow svg:hover path {
fill: var(--green);
}
section__nav-arrow.slick-disabled {
opacity: 0.3;
pointer-events: none;
}
section figure {
padding: 50px;
background-color: var(--black);
color: var(--white);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.css" />
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.min.js"></script>
<section class="section">
<div class="container d-none d-md-block">
<div class="row justify-content-end">
<div class="col-2">
<div class="section__nav">
<button class="section__nav-arrow section__nav-prev">
<svg xmlns="http://www.w3.org/2000/svg" width="13.503" height="23.619" viewBox="0 0 13.503 23.619">
<path data-name="Icon ionic-ios-arrow-back" d="M15.321,18l8.937-8.93a1.688,1.688,0,0,0-2.391-2.384L11.742,16.8a1.685,1.685,0,0,0-.049,2.327L21.86,29.321a1.688,1.688,0,0,0,2.391-2.384Z" transform="translate(-11.251 -6.194)" />
</svg>
</button>
<button class="section__nav-arrow section__nav-next">
<svg xmlns="http://www.w3.org/2000/svg" width="13.503" height="23.619" viewBox="0 0 13.503 23.619">
<path data-name="Icon ionic-ios-arrow-back" d="M20.683,18,11.746,9.07a1.688,1.688,0,0,1,2.391-2.384L24.262,16.8a1.685,1.685,0,0,1,.049,2.327L14.144,29.321a1.688,1.688,0,0,1-2.391-2.384Z" transform="translate(-11.251 -6.194)" />
</svg>
</button>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12">
<div id="section-slick">
<figure>Card 1</figure>
<figure>Card 2</figure>
<figure>Card 3</figure>
<figure>Card 4</figure>
</div>
</div>
</div>
</div>
</section>
everyone,
this is the first time I am writing something here and I hope I can explain my problem good enough :) I am currently working on the new onlineshop of my company and have problems with swiper.js.
I'm trying to build a slider with thumbnail gallery that is shown under (horizontal) the main slide on mobile and to the right of main slide (vertical) on desktop. Getting mostly mixed results but not what I want. Biggest problem is the gap on mobile to the follow up content. Source of this problem has something to do with the dimensions of the thumbnails. Hope someone can help me with this.
For faster prototyping I use bootstrap, please don't judge me xD
.swiper-container {
width: 100%;
height: 500px;
transition: opacity 0.6s ease, transform 0.3s ease;
}
.swiper-container.nav-slider {
width: 100%;
padding-top: 5px;
padding-left: 0;
}
#media (min-width: 992px) {
.swiper-container {
width: 80%;
float: left;
}
.swiper-container.nav-slider {
width: 20%;
padding-top: 0;
padding-left: 5px;
}
}
<div class="col-12 col-md-5 row p-0 m-0 order-1 order-md-2">
<div class="col-12 col-lg-10 swiper-container gallery-top">
<div class="swiper-wrapper pb-0 mb-0">
<? for ($p41=0;$p41<count($bildliste_gross);$p41++) { $pcount=$p41+1; echo '<div class="swiper-slide"><img class="d-block border" style="width:100%; height:auto;" src="'.$bildliste_gross[$p41].'" alt="'.$artikelname.'" title="'.$artikelname.' (Bild '.$pcount.')" loading="lazy"></div>'; } ?>
</div>
<div class="swiper-button-next swiper-button-black <?=$ausblenden41?>"></div>
<div class="swiper-button-prev swiper-button-black <?=$ausblenden41?>"></div>
</div>
<div class="col-12 col-lg-2 swiper-container nav-slider m-0 p-0 gallery-thumbs <?=$ausblenden41?>">
<div class="swiper-wrapper">
<? for ($t41=0;$t41<count($bildliste_thumb);$t41++) { echo '<div class="swiper-slide"><img class="border" src="'.$bildliste_thumb[$t41].'" alt="'.$artikelname.'" loading="lazy"></div>'; } ?>
</div>
</div>
<script>
var galleryThumbs = new Swiper('.gallery-thumbs', {
direction: 'horizontal',
spaceBetween: 10,
slidesPerView: 4,
loop: false,
freeMode: true,
centeredSlides:false,
loopedSlides: 4,
watchSlidesVisibility: true,
watchSlidesProgress: true,
breakpoints:{
992:{
direction: 'vertical',
centeredSlides:true,
}
},
});
var galleryTop = new Swiper('.gallery-top', {
direction: 'horizontal',
spaceBetween: 10,
loop: true,
loopedSlides: 4 ,
navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', },
thumbs: { swiper: galleryThumbs, },
});
</script>
</div>
As you can see I have 2 slick sliders running in this page, One is seen by default and the second one is triggered in a bootstrap modal when user click one of the slides of the first one. This is to see the slide individually and in bigger size . My use case is simply this and I am super close to completing: When user click any of the slide of the slider, a modal should pop up with slick slider with a 1 slideToShow option instead of 3 so the image is bigger, the slide that show on the Modal should be the same the one user clicked.
Issues.
1. When page is refreshed and user click one of the slide, the modal slider opens to with a buggy view, once i start clicking the next and previous arrow , this goes away, why is this happening?
see the bugg view:
2. How do i show the same slide the user clicker on the modal also, right now modal slider opens like a new slider and the first slide is shown all the time not the one user clicked
.stack-list-slider-slider-area {
margin-top: 30px;
}
.stack-list-slider-slider-area .stack-list-slider-slide h3 {
font-size: 15px;
text-align: center;
margin-top: 18px;
}
.stack-list-slider-slider-area button.slick-prev.slick-arrow {
position: relative;
width: 30px;
overflow: hidden;
background: transparent;
border: 0;
position: absolute;
left: 0px;
right: auto;
z-index: 11;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
}
.stack-list-slider-slider-area button.slick-prev.slick-arrow:after {
content: "<";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: #00805f;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
}
.stack-list-slider-slider-area button.slick-next.slick-arrow {
position: relative;
width: 40px;
overflow: hidden;
background: transparent;
border: 0;
position: absolute;
left: auto;
right: 0px;
z-index: 11;
top: 50%;
transform: translateY(-50%);
height: 40px;
}
.stack-list-slider-slider-area button.slick-next.slick-arrow:after {
content: ">";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: #00805f;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
}
.stack-list-slider-slider-area .stack-list-slider.slick-initialized.slick-slider {
position: relative;
}
.stack-list-slider-slider-area .stack-list-slider-slide {
padding: 30px 0;
}
.stack-list-slider-slider-area .slider-img img {
display: block;
width: 100%;
}
.stack-list-slider-slider-area .slick-initialized .slick-slide {
padding: 0 15px !important;
}
.stack-list-slider-slider-area .stack-list-slider.slick-initialized.slick-slider {
padding: 0 40px;
}
.stack-list-slider-modal-slider-area {
margin-top: 30px;
}
.stack-list-slider-modal-slider-area .stack-list-slider-modal-slide h3 {
font-size: 15px;
text-align: center;
margin-top: 18px;
}
.stack-list-slider-modal-slider-area button.slick-prev.slick-arrow {
position: relative;
width: 30px;
overflow: hidden;
background: transparent;
border: 0;
position: absolute;
left: 0px;
right: auto;
z-index: 11;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
}
.stack-list-slider-modal-slider-area button.slick-prev.slick-arrow:after {
content: "<";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: #00805f;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
}
.stack-list-slider-modal-slider-area button.slick-next.slick-arrow {
position: relative;
width: 40px;
overflow: hidden;
background: transparent;
border: 0;
position: absolute;
left: auto;
right: 0px;
z-index: 11;
top: 50%;
transform: translateY(-50%);
height: 40px;
}
.stack-list-slider-modal-slider-area button.slick-next.slick-arrow:after {
content: ">";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: #00805f;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
}
.stack-list-slider-modal-slider-area .stack-list-modal-slider.slick-initialized.slick-slider {
position: relative;
}
.stack-list-slider-modal-slider-area .stack-list-slider-modal-slide {
padding: 30px 0;
}
.stack-list-slider-modal-slider-area .slider-img img {
display: block;
width: 100%;
}
.stack-list-slider-modal-slider-area .slick-initialized .slick-slide {
padding: 0 15px !important;
}
.stack-list-slider-modal-slider-area .stack-list-modal-slider.slick-initialized.slick-slider {
padding: 0 40px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Practice Html page</title>
<!-- Slick Slider CSS CDN 3.3.1-->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.css" />
<!-- Bootstrap CSS CDN 3.3.1-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="style.css">
</head><!-- end head -->
<body>
<div class="stack-list-slider-slider-area">
<div class="container">
<div class="stack-list-slider">
<div class="stack-list-slider-slide" data-toggle="modal" data-target="#modalId">
<div class="slider-img">
<img src="https://www.dropbox.com/s/nnbizh3joq3l71n/1.jpg?dl=1" alt="">
</div>
<h3>Product Name</h3>
</div> <!-- /.stack-list-slider-slide -->
<div class="stack-list-slider-slide" data-toggle="modal" data-target="#modalId">
<div class="slider-img">
<img src="https://www.dropbox.com/s/9k753y33lfwnnnw/2.jpg?dl=1" alt="">
</div>
<h3>Product Name</h3>
</div> <!-- /.stack-list-slider-slide -->
<div class="stack-list-slider-slide" data-toggle="modal" data-target="#modalId">
<div class="slider-img">
<img src="https://www.dropbox.com/s/9dven42pc2o012j/3.jpg?dl=1" alt="">
</div>
<h3>Product Name</h3>
</div> <!-- /.stack-list-slider-slide -->
<div class="stack-list-slider-slide" data-toggle="modal" data-target="#modalId">
<div class="slider-img">
<img src="https://www.dropbox.com/s/feqzlynvgryieh5/4.jpg?dl=1" alt="">
</div>
<h3>Product Name</h3>
</div> <!-- /.stack-list-slider-slide -->
</div> <!-- /.stack-list-slider -->
</div><!-- end container -->
</div><!-- end slider area -->
<!-- img gallary modal start -->
<div id="modalId" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<div class="stack-list-slider-modal-slider-area">
<div class="stack-list-modal-slider">
<div class="stack-list-slider-modal-slide" >
<div class="slider-img">
<img src="https://www.dropbox.com/s/nnbizh3joq3l71n/1.jpg?dl=1" alt="">
</div>
<h3>Product Name</h3>
</div> <!-- /.stack-list-slider-slide -->
<div class="stack-list-slider-modal-slide" >
<div class="slider-img">
<img src="https://www.dropbox.com/s/9k753y33lfwnnnw/2.jpg?dl=1" alt="">
</div>
<h3>Product Name</h3>
</div> <!-- /.stack-list-slider-slide -->
<div class="stack-list-slider-modal-slide" >
<div class="slider-img">
<img src="https://www.dropbox.com/s/9dven42pc2o012j/3.jpg?dl=1" alt="">
</div>
<h3>Product Name</h3>
</div> <!-- /.stack-list-slider-slide -->
<div class="stack-list-slider-modal-slide" >
<div class="slider-img">
<img src="https://www.dropbox.com/s/feqzlynvgryieh5/4.jpg?dl=1" alt="">
</div>
<h3>Product Name</h3>
</div> <!-- /.stack-list-slider-slide -->
</div> <!-- /.stack-list-slider -->
</div><!-- end slider area -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- img gallary modal ends -->
<!-- Loading Jquery 3.4.0 CDN -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!-- Loading Jquery 3.4.0 CDN -->
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<!-- Loading Slick Slider CDN -->
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<script>
$(document).ready(function () {
$('.stack-list-slider').slick({
slidesToShow: 3,
slidesToScroll: 1,
autoplay: false,
arrows: true,
asNavFor: ".stack-list-modal-slider",
responsive: [
{
breakpoint: 991,
settings: {
slidesToShow: 3,
}
},
{
breakpoint: 767,
settings: {
slidesToShow: 2,
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
}
},
]
});
$('.stack-list-modal-slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: false,
arrows: true,
asNavFor: ".stack-list-slider",
});
});
</script>
</body>
</html>
add this section
$('#myModal').on('shown.bs.modal', function () {
//write your code here
});
full code
$(document).ready(function () {
$('.stack-list-slider').slick({
slidesToShow: 3,
slidesToScroll: 1,
autoplay: false,
arrows: true,
asNavFor: ".stack-list-modal-slider",
responsive: [
{
breakpoint: 991,
settings: {
slidesToShow: 3,
}
},
{
breakpoint: 767,
settings: {
slidesToShow: 2,
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
}
},
]
});
});
$('#modalId').on('shown.bs.modal', function () {
$('.stack-list-modal-slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: false,
arrows: true,
asNavFor: ".stack-list-slider",
});
});
reference is here https://codepen.io/mhfuad/pen/yLNRagb
I think this is a solution for now
Getting the "data-slick-index" when clicking the first slide and using that to set the modal slider using "slickGoTo" fixed the slide matching issue. As far as the bug goes Multiple fixes were needed
1) use "unslick" when not using modal slider and trigger modal slider only when modal is modal is open(thanks to MH Fuad), the bug seems to be happening due to multiple sliders in one page. Here is my jquery
jQuery(document).ready(function () {
jQuery('.stack-list-slider').slick({
slidesToShow: 3,
slidesToScroll: 1,
autoplay: false,
arrows: true,
infinite: true,
asNavFor: ".stack-list-modal-slider",
responsive: [
{
breakpoint: 991,
settings: {
slidesToShow: 3,
}
},
{
breakpoint: 767,
settings: {
slidesToShow: 2,
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
}
},
]
});
});
var clickedSlick;
jQuery('.stack-list-slider-slide').each(function () {
jQuery(this).click(function (e) {
e.preventDefault();
var test =jQuery(this).closest('.slick-active').attr('data-slick-index');
console.log(test);
clickedSlick = test;
});
})
jQuery('.stack-list-slider .stack-list-modal-slider').removeClass('slick-active');
//set active class to first thumbnail slides
jQuery('.stack-list-slider .stack-list-modal-slider').eq(0).addClass('slick-active');
jQuery('#modalId').on('shown.bs.modal', function () {
jQuery('.stack-list-modal-slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: false,
arrows: true,
infinite: true,
asNavFor: ".stack-list-slider",
});
jQuery('.stack-list-modal-slider').slick('slickGoTo', clickedSlick);
});
jQuery("#modalId").on('hidden.bs.modal', function (e) {
jQuery('.stack-list-modal-slider').slick('unslick')
});
Going through a lot of similar stack questions but seems not solve my case. Like the question says i want to have an opacity for the image but not the next. i have all the text inside another div but its still giving the texts opacity , i am sure its due the parent still having the opacity. In my case i want no opacity on regular screen and on mobile devices have opacity.
i saw an example of giving a background url image which plane white image, but i couldn't replicate it (see below)
background: url(white image) center center repeat;
$(document).ready(function(){
$('.home-slick-slider').slick({
infinite: true,
speed: 300,
slidesToShow: 1,
slidesToScroll: 1,
cssEase: 'linear',
arrows: true,
dots: true,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
infinite: true,
dots: true,
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
infinite: true,
dots: true,
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
infinite: true,
dots: true,
}
}
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
]
});
});
.home-slick-slider>.slick-prev:before {
background-image: url('../images/chevron-left.png');
background-size: 50px 100px;
display: inline-block;
width: 50px;
height: 100px;
content:"";
}
.home-slick-slider>.slick-next:before {
background-image: url('../images/chevron-right.png');
background-size: 50px 100px;
display: inline-block;
width: 50px;
height: 100px;
content:"";
}
.home-slick-slider>.slick-prev {
left: 20px;
z-index: 1;
}
.home-slick-slider>.slick-next {
right: 50px;
z-index: 1;
}
.home-slick-text{
text-align: right;
margin-right: 10%;
padding-top: 5%;
}
.home-slick-text h2{
font-size: 52px;
line-height: 50px;
letter-spacing: 8px;
color: #5d7375;
text-transform: uppercase;
zoom: 1;
}
.home-slick-text p{
font-size: 16px;
line-height: 26px;
float: right;
clear: both;
width: 40%;
color: #5d7375;
zoom: 1;
}
.home-slick-text button{
float: right;
clear: both;
line-height: 20px;
zoom: 1;
background: #60bc02;
border: 1px solid #60bc02;
color: white;
width: 10%;
height: 58px;
font-weight: bold;
font-size: 20px;
border-radius: 3px;
}
#media only screen and (max-width: 1079px)
{
.home-slick-content{opacity: 0.5; }
.home-slick-text h1{opacity: 4 !important}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick-theme.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<body>
<div class="home-slick-slider">
<div class="home-slider-slides">
<div class="home-slider-content">
<div class="home-slick-content" style="background: url(http://www.baptistphysicianpartners.com/Sitefinity/WebsiteTemplates/BPP/App_Themes/Default/global/images/a-quality-connection-slide.jpg);width: 100%;height:450px;background-size: 100% 100%;">
<div class="home-slick-text">
<h2>A Quality<br>Connection</h2>
<p>Baptist Physician Partners is a physician-led, clinically integrated network committed to improving the quality of patient care in Northeast Florida.</p>
<button type="button">Apply Now</button>
</div>
</div>
</div>
</div>
<div class="home-slick-content">
<div class="home-slick-content" style="background: url(http://www.baptistphysicianpartners.com/Sitefinity/WebsiteTemplates/BPP/App_Themes/Default/global/images/a-quality-connection-slide.jpg);width: 100%;height: 450px;background-size: 100% 100%;">
<div class="home-slick-text">
<h2>A Quality<br>Connection</h2>
<p>Baptist Physician Partners is a physician-led, clinically integrated network committed to improving the quality of patient care in Northeast Florida.</p>
<button type="button">Apply Now</button>
</div>
</div>
</div>
</div>
</body>
If you want to make a background color transparent, but preserve the text opaqueness, you can use an rgba colour.
background-color: rgba(255, 255, 255, 0.5);
If you want to do this with an actual image, you can save the image as a PNG with opacity. This is supported in all modern browsers.
Otherwise you'll have to stack two separate elements on top of each other (rather than properly nesting them) in order to avoid the opacity affecting the element with the text.
Your text is a child element of your div with the image, thus applying opacity to the image will also apply it to its children. You can fix this by wrapping all the text elements and buttons that you want to lie above the image in a div, which is no children of the image div, and make this div position: absolute, so you can move it above the image. Then you can set the opacity of your image, without changing the opacity of the text.
so i found a way to do this by giving a white image layer. i have re arranged some html as well
#media only screen and (max-width: 1079px)
{
.home-slick-content{
background: url(http://www.baptistphysicianpartners.com/Sitefinity/WebsiteTemplates/BPP/App_Themes/Default/global/images/white-trans-overlay.png);
background-size: 100% 100%;
height: 450px;
}
}
<body>
<div class="home-slick-slider">
<div class="home-entire-slide-content"style="background: url(http://www.baptistphysicianpartners.com/Sitefinity/WebsiteTemplates/BPP/App_Themes/Default/global/images/a-quality-connection-slide.jpg);width: 100%;height:450px;background-size: 100% 100%;">
<div class="home-slick-content">
<div class="home-slick-text" >
<h2>A Quality<br>Connection</h2>
<p>Baptist Physician Partners is a physician-led, clinically integrated network committed to improving the quality of patient care in Northeast Florida.</p>
<button type="button">Apply Now</button>
</div>
</div>
</div>
<div class="home-entire-slide-content"style="background: url(http://www.baptistphysicianpartners.com/Sitefinity/WebsiteTemplates/BPP/App_Themes/Default/global/images/a-quality-connection-slide.jpg);width: 100%;height:450px;background-size: 100% 100%;" >
<div class="home-slick-content">
<div class="home-slick-text" >
<h2>A Quality<br>Connection</h2>
<p>Baptist Physician Partners is a physician-led, clinically integrated network committed to improving the quality of patient care in Northeast Florida.</p>
<button type="button">Apply Now</button>
</div>
</div>
</div>
</div>
</body>
I am working on a website, and it is built off a theme. In the body of the site is structured to have a left-panel div which houses the navigation and a right-panel div which houses the body content.
When the left-panel opens from a collapsed view (showing only icons) to the full view (showing the nav text), owl-carousel, since it's loaded on page load, doesn't readjust the width.
I've tried a few methods to try and reload the carousel, following their API, but am not successful. The body doesn't have a set width, such as inline styles, but instead the class left-menu-open is set, when the left menu is open.
I've also looked at several other cases of people trying to do the same thing, but none of their code examples work.
Below is my code. I am running this in a .php file, so I am able to load multiple sliders in the body content, without them rotating in relation. The carousel loads and functions fine, it's just that it begins to clip if the page is loaded with the nav open and one closes the nav, or the 3rd slide shows if the page is loaded with the nav closed and is opened.
One method I've tried is
if ( $( 'body' ).resize() { }
if ( $( 'body' ).hasClass( 'left-nav-open' ) { } else if ( !$( 'body ').resize() { }
(function($) {
$(function() {
var $owl = $('.owl-<?php echo $owl_widget_title; ?>');
$owl.owlCarousel({
// your initial option here, again.
loop:true,
nav:true,
navText: ["<i class=\"fa fa-chevron-left\"></i>","<i class=\"fa fa-chevron-right\"></i>"],
dots: false,
lazyLoad: true,
lazyContent: true,
autoplaySpeed: 1000,
autoplayTimeout: 7000,
autoplayHoverPause: true,
responsive : {
0 : {
items: 1,
slideBy: 1,
autoHeight:true,
},
992 : {
items: <?php echo $num_of_items; ?>,
slideBy: <?php echo $num_of_items; ?>,
}
}
});
});
})(jQuery)
I've tried destroy.owl.carousel, and then initialize.owl.carousel but neither of those seem to work or run at all.
Any and all help is appreciated! Thank you
To update owl after resize of container one would need to call .onResize() _handler on its data. The updateOwl() function should look like this:
updateOwl = function(){
$(".owl-carousel").each(function() {
$(this).data('owl.carousel').onResize();
});
};
The only thing to watch for is when exactly to call this function. I assume the sidebar is not jumping into position, but rather smoothly animating. The call to .onResize() needs to be delayed by the duration of animation, so the size of the carousel is calculated based on final content size. Delay the execution of updateOwl() by wrapping it into a setTimeout() (equal or slightly longer than the sidebar animation duration):
$(document).on('click', '.sidebarToggle', function(){
setTimeout(function(){
updateOwl();
}, 321)
});
...where .sidebarToggle would be your sidebar opener.
Working example:
(function($) {
var $owl = $('.owl-carousel'),
updateOwl = function(){
$owl.each(function() {
$(this).data('owl.carousel').onResize();
});
};
$owl.owlCarousel({
loop: true,
nav: true,
navText: ['<i class="fa fa-chevron-left"></i>', '<i class="fa fa-chevron-right"></i>'],
dots: false,
lazyLoad: true,
autoplaySpeed: 1000,
autoplayTimeout: 7000,
autoplayHoverPause: true,
responsive: {
0: {
items: 1,
slideBy: 1,
autoHeight: true,
},
992: {
items: 3,
slideBy: 3,
}
}
});
$(document).on('click', '.sidebarToggle', function(){
$('body').toggleClass('sidebarOpen');
setTimeout(function(){
updateOwl();
}, 321)
});
$(window).on('resize', updateOwl);
})(jQuery)
body {
margin: 0;
transition: padding-left .3s cubic-bezier(.4,0,.2,1);
}
.sidebar {
height: 100vh;
position: absolute;
width: 200px;
background-color: #888;
left: -200px;
top:0;
transition: left .3s cubic-bezier(.4,0,.2,1);
box-sizing: border-box;
}
.sidebarOpen .sidebar {
left: 0;
}
body.sidebarOpen {
padding-left: 200px;
}
.owl-carousel .owl-item {
padding: 0 45px;
box-sizing: border-box;
}
.owl-carousel .owl-item > div{
min-height: 135px;
width: 100%;
border: 1px solid #ccc;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: Gainsboro;
border-radius: 3px;
}
button {
margin: 15px;
}
.owl-carousel {
position: relative;
margin: 15px 0 0;
}
.owl-nav >div {
position: absolute;
top: 50%;
width: 20px;
transform: translate(-50%, -50%);
text-align: center;
}
.owl-prev {left: 20px}
.owl-next {left: calc(100% - 20px);}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.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/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
<div class="sidebar"></div>
<div class="owl-carousel">
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
</div>
<button class="sidebarToggle">SidebarToggle</button>
If the above is not working for you, I'll need to have a look at your implementation to be able to debug it.
Side note: lazyContent is currently unavailable. According to plugin author:
...lazyContent was introduced during beta tests but i removed it from the final release due to bad implementation. It is a nice options so i will work on it in the nearest feature.
I use destroy.owl.carousel to destroy carousel. Carousel reinitialize on click of left navigation menu
var $owl = $('.owl-carousel');
/*inital on load */
$owl.owlCarousel({
items: 6,
lazyLoad: true,
loop: true,
margin: 10,
});
/*on click of navigation menu */
function resizeCarosel(obj) {
if (obj.classList.contains('is-open')) {
$owl.trigger('destroy.owl.carousel'); /*destroy Carousel*/
$owl.owlCarousel({ /*reinitialize Carousel*/
items: 6,
lazyLoad: true,
loop: true,
margin: 10,
});
}
if (obj.classList.contains('is-closed')) {
$owl.trigger('destroy.owl.carousel'); /*destroy Carousel*/
$owl.owlCarousel({ /*reinitialize Carousel*/
items: 2,
lazyLoad: true,
loop: true,
margin: 10,
/*for responsive
items: 4,
responsiveClass: true,
responsive: {
0: {
items: 1,
nav: true
},
600: {
items: 3,
nav: false
},
1000: {
items: 5,
nav: true,
loop: false
}
}
*/
});
}
}
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://rawgit.com/FragCoder/bootstrap-left-slide-menu/master/bootstrap-left-slide-menu.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://rawgit.com/FragCoder/bootstrap-left-slide-menu/master/bootstrap-left-slide-menu.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/smashingboxes/OwlCarousel2/2.0.0-beta.3/dist/assets/owl.carousel.css">
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/smashingboxes/OwlCarousel2/2.0.0-beta.3/dist/assets/owl.theme.default.css">
<script type="text/javascript" src="https://cdn.rawgit.com/smashingboxes/OwlCarousel2/2.0.0-beta.3/dist/owl.carousel.js"></script>
<div id="wrapper" class="">
<div class="overlay" style="display: none;"></div>
<nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation">
<ul class="nav sidebar-nav">
<li class="sidebar-brand">
BLESM
</li>
<li>
<i class="glyphicon glyphicon-camera"></i> Photo
</li>
<li>
<i class="glyphicon glyphicon-facetime-video"></i> Video
</li>
<li>
<i class="glyphicon glyphicon-headphones"></i> Music
</li>
<li>
<i class="glyphicon glyphicon-cloud"></i> Cloud
</li>
<li>
<i class="glyphicon glyphicon-th"></i> Apps
</li>
<li>
<i class="glyphicon glyphicon-cog"></i> Settings
</li>
</ul>
</nav>
<div id="page-content-wrapper">
<button type="button" class="hamburger animated fadeInLeft is-closed" data-toggle="offcanvas" onclick="resizeCarosel(this)">
<span class="hamb-top"></span>
<span class="hamb-middle"></span>
<span class="hamb-bottom"></span>
</button>
<div class="container">
<div class="owl-carousel owl-theme">
<img class="owl-lazy" data-src="https://placehold.it/350x250&text=1" data-src-retina="https://placehold.it/350x250&text=1-retina" alt="">
<img class="owl-lazy" data-src="https://placehold.it/350x250&text=2" data-src-retina="https://placehold.it/350x250&text=2-retina" alt="">
<img class="owl-lazy" data-src="https://placehold.it/350x250&text=3" alt="">
<img class="owl-lazy" data-src="https://placehold.it/350x250&text=4" alt="">
<img class="owl-lazy" data-src="https://placehold.it/350x250&text=5" alt="">
<img class="owl-lazy" data-src="https://placehold.it/350x250&text=6" alt="">
<img class="owl-lazy" data-src="https://placehold.it/350x250&text=7" alt="">
<img class="owl-lazy" data-src="https://placehold.it/350x250&text=8" alt="">
<img class="owl-lazy" data-src="https://placehold.it/350x250&text=9" alt="">
<img class="owl-lazy" data-src="https://placehold.it/350x250&text=10" alt="">
<img class="owl-lazy" data-src="https://placehold.it/350x250&text=11" alt="">
</div>
</div>
</div>
</div>
You should be able to get the job done by simple deleting the element from the DOM (jquery has a function .remove()) and then recreating exactly as you did with the first one. Notice that you will have to store the variables that come from the server in the client.
I propose to trigger the refresh.owl.carousel event.
My sidebar uses transition so I need to detect the transitionend event.
I've set the .main block as the responsiveBaseElement. Now the carousel adjusts to the width of its container, and not to the width of the entire page.
And I've added a few more jump points to make the responsive changes more
visible.
Please check the result. Is it what you want to achieve?
https://codepen.io/glebkema/pen/zwozRx
var $owl = $('#myCarousel');
var owl = $owl.owlCarousel({
autoplay: true,
autoplayHoverPause: true,
dots: false,
loop: true,
nav: true,
navText: [ "<i class=\"fa fa-chevron-left\"></i>",
"<i class=\"fa fa-chevron-right\"></i>" ],
responsiveBaseElement: '.main',
responsive : {
0 : {
items: 1,
slideBy: 1,
},
400 : {
items: 2,
slideBy: 1,
},
768 : {
items: 3,
slideBy: 2,
},
992 : {
items: 4,
slideBy: 2,
},
1200 : {
items: 5,
slideBy: 2,
},
},
});
$('.sidebar-switcher').click(function(){
$('body').toggleClass( 'body-open' );
$('.main').one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend", function(event) {
owl.trigger('refresh.owl.carousel');
});
});
* { box-sizing: border-box; }
body {
margin: 0;
}
/** sidebar closed **/
.main,
.sidebar {
-webkit-transition: margin .4s ease-out;
-moz-transition: margin .4s ease-out;
-ms-transition: margin .4s ease-out;
-o-transition: margin .4s ease-out;
transition: margin .4s ease-out;
}
.main {
padding: 0 36px;
margin-left: 70px;
}
.sidebar {
background: #ccc;
float: left;
height: 100vh;
margin-left: -230px;
position: relative;
width: 300px;
}
.sidebar-switcher {
position: absolute; top: 12px; right: 12px;
}
.sidebar-switcher:before {
content: '\f0c9';
cursor: pointer;
font-family: 'FontAwesome';
font-size: 30px;
line-height: 1;
position: absolute; top: 12px; right: 12px;
}
/** sidebar opened **/
.body-open .main {
margin-left: 300px;
}
.body-open .sidebar {
margin-left: 0;
}
.body-open .sidebar-switcher:before {
content: '\f00d';
}
/** owl carousel **/
.owl-item > div {
margin: 12px;
}
.owl-next,
.owl-prev {
position: absolute;
top: 0;
width: 36px;
bottom: 0;
}
.owl-next {
left: 100%;
margin-left: -12px;
}
.owl-prev {
right: 100%;
margin-right: -12px;
}
.owl-next i,
.owl-prev i {
font-size: 30px;
line-height: 24px;
margin-top: -12px;
position: absolute;
top: 50%;
}
.owl-next i {
left: 12px;
}
.owl-prev i {
right: 12px;
}
.owl-next:hover i,
.owl-prev:hover i {
color: red;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="sidebar">
<div class="sidebar-switcher"></div>
</div>
<div class="main">
<div class="owl-carousel" id="myCarousel">
<div><img src="https://via.placeholder.com/400x200/fc3/fff/?text=1" alt=""></div>
<div><img src="https://via.placeholder.com/400x200/693/fff/?text=2" alt=""></div>
<div><img src="https://via.placeholder.com/400x200/369/fff/?text=3" alt=""></div>
<div><img src="https://via.placeholder.com/400x200/f63/fff/?text=4" alt=""></div>
<div><img src="https://via.placeholder.com/400x200/936/fff/?text=5" alt=""></div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>