JavaScript thumbnail swiper / slider doesn't work properly - slider

I'm trying to make a simple swiper / slider with thumbnails. It works fine, the only problem is, that slides on the right, which do not have to be shown yet, are present on the screen, which makes the swiper wider than the webpage...
Here ist the picture, how it looks like
Does anyone know, how to fix it? What am I doing wrong?
Thanks for you help.
var galleryThumbs = new Swiper('.gallery-thumbs', {
spaceBetween: 10,
slidesPerView: 'auto',
freeMode: true,
watchSlidesVisibility: true,
watchSlidesProgress: true,
});
var galleryTop = new Swiper('.gallery-top', {
spaceBetween: 10,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
grabCursor: true,
thumbs: {
swiper: galleryThumbs
}
});
html,
body {
position: relative;
height: 100%;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide{
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
align-items: center;
}
.gallery-top {
height: 60%;
width: 100%;
}
.gallery-thumbs {
height: 20%;
box-sizing: border-box;
padding: 10px 0;
}
.gallery-thumbs .swiper-slide {
width: 25%;
height: 100%;
opacity: 0.4;
}
.gallery-thumbs img{
width:40%
}
.gallery-thumbs .swiper-slide-thumb-active {
opacity: 1;
}
.gallery-top img{
width: 400px;
height:400px;
}
#media only screen and (min-width:100px) and (max-width:500px){
.gallery-top img{
width: 300px;
height:300px;
}
.gallery-thumbs img{
width:100%
}
}
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<div class="swiper-container gallery-top">
<div class="swiper-wrapper">
<div class="swiper-slide slide-top">
<img src='https://picsum.photos/id/22/200/300'
alt='slide 1' />
</div>
<div class="swiper-slide slide-top">
<img src='https://picsum.photos/id/237/200/300'
alt='slide 2' />
</div>
<div class="swiper-slide slide-top">
<img src='https://picsum.photos/200/300'
alt='slide 3' />
</div>
</div>
</div>
<!-- Arrows -->
<div class="swiper-button-next swiper-button-black"></div>
<div class="swiper-button-prev swiper-button-black"></div>
<div class="swiper-container gallery-thumbs">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src='https://picsum.photos/200/300'
alt='slide 1' />
</div>
<div class="swiper-slide">
<img src='https://picsum.photos/200/300'
alt='slide 2' />
</div>
<div class="swiper-slide">
<img src='https://picsum.photos/200/300'
alt='slide 3' />
</div>
</div>
</div>

Your mistake.
The CDN is for swiper 8
https://unpkg.com/swiper#8.4.4/swiper-bundle.min.css
But your markup is of the old versions of swiper.
https://swiperjs.com/migration-guide
Change swiper-container to swiper
html,
body {
position: relative;
height: 100%;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide{
display: -webkit-flex;
display: flex;
justify-content: center;
align-items: center;
}
.gallery-top {
height: 60%;
width: 100%;
}
.gallery-thumbs {
height: 20%;
box-sizing: border-box;
padding: 10px 0;
}
.gallery-thumbs .swiper-slide {
width: 25%;
height: 100%;
opacity: 0.4;
}
.gallery-thumbs img{
width:40%
}
.gallery-thumbs .swiper-slide-thumb-active {
opacity: 1;
}
.gallery-top img{
width: 400px;
height:400px;
}
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<div class="swiper gallery-top">
<div class="swiper-wrapper">
<div class="swiper-slide slide-top">
<img src='https://picsum.photos/id/22/200/300'
alt='slide 1' />
</div>
<div class="swiper-slide slide-top">
<img src='https://picsum.photos/id/237/200/300'
alt='slide 2' />
</div>
<div class="swiper-slide slide-top">
<img src='https://picsum.photos/200/300'
alt='slide 3' />
</div>
</div>
</div>
<!-- Arrows -->
<div class="swiper-button-next swiper-button-black"></div>
<div class="swiper-button-prev swiper-button-black"></div>
<div class="swiper gallery-thumbs">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src='https://picsum.photos/200/300'
alt='slide 1' />
</div>
<div class="swiper-slide">
<img src='https://picsum.photos/200/300'
alt='slide 2' />
</div>
<div class="swiper-slide">
<img src='https://picsum.photos/200/300'
alt='slide 3' />
</div>
</div>
</div>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
var galleryThumbs = new Swiper('.gallery-thumbs', {
spaceBetween: 10,
slidesPerView: 'auto',
freeMode: true,
watchSlidesVisibility: true,
watchSlidesProgress: true,
});
var galleryTop = new Swiper('.gallery-top', {
spaceBetween: 10,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
grabCursor: true,
thumbs: {
swiper: galleryThumbs
}
});
</script>

Related

Slick carousel next and prev icon showing above/below

I'm using Slick Carousel this and my "next" and "previous" arrows are appearing above and below my text carousel, rather than on each side. How to fix this. How to fix these arrowe. I am using slick carousel and fontawsome.
Here is my HTML
<div class="nav-wrapper">
<div class="nav-slider">
<i class="fa fa-angle-left prev"></i>
<i class="fa fa-angle-right next"></i>
<div class="navItem-wrapper">
<div class="navItem-car">General Microbiology</div>
<div class="navItem-car">Biochemistry</div>
<div class="navItem-car">Biotechnology</div>
<div class="navItem-car">Bacteriology</div>
<div class="navItem-car">Cell Biology</div>
<div class="navItem-car">Difference</div>
<div class="navItem-car">Phycology</div>
<div class="navItem-car">Virology</div>
<div class="navItem-car">Disease</div>
<div class="navItem-car">Food Microbiology</div>
<div class="navItem-car">Epidemiology</div>
<div class="navItem-car">Antimicrobial Drugs</div>
<div class="navItem-car">Genetics</div>
<div class="navItem-car">Molecular Biology</div>
<div class="navItem-car">Mycology</div>
<div class="navItem-car">Bioinformatics</div>
<div class="navItem-car">Immunology</div>
<div class="navItem-car">Environmental Microbiology</div>
<div class="navItem-car">Medical Microbiology</div>
<div class="navItem-car">IPR</div>
<div class="navItem-car">Microscope</div>
<div class="navItem-car">Parasitology</div>
<div class="navItem-car">Microbiologists</div>
<div class="navItem-car">Biosafety</div>
<div class="navItem-car">Biochemical Test</div>
<div class="navItem-car">Staining</div>
<div class="navItem-car">Protocols</div>
<div class="navItem-car">Instruments</div>
</div>
</div>
</div>
and here's the CSS (which I'm pretty sure isn't playing a role here):
.navItem-wrapper{
width: 60%;
margin: 0px auto;
overflow: hidden;
}
.navItem-wrapper .navItem-car{
display: inline-block;
margin-right: 15px;
}
.nav-slider .next{
position: absolute;
top: 1%;
right: 14%;
cursor: pointer;
font-size: 20px;
}
.nav-slider .prev{
position: absolute;
top: 1%;
left: 14%;
cursor: pointer;
font-size: 20px;
}
ul.slick-dots {
display: none;
}
ul.slick-dots {
display: none;
visibility: hidden;
}
.navItem-wrapper{
height: 20px;
}
here's the JS: $(document).ready(function(){
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.min.js"></script>
<script type="text/javascript">
$(function(){
$('.navItem-wrapper').slick({
center: false,
loop: false,
useCSS: false,
initialSlide: 0,
dots: false,
infinite: true,
variableWidth: true,
speed: 300,
nextArrow: $('.next'),
prevArrow: $('.prev'),
slidesToShow: 8,
slidesToScroll: 1,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 5,
slidesToScroll: 1,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
}
]
});
});
</script>
just do like this without tag i for arrow
<div class="your-class">
<div>your content</div>
<div>your content</div>
<div>your content</div>
</div>
and use this in js file
$(document).ready(function(){
$('.your-class').slick({
setting-name: setting-value
});
});
this is generate html tag for arrow

How can I use pagination outside the SwiperJS container? [duplicate]

I'm trying to display the nav buttons outside the swiper container, because of the container overflow: hidden i had to create a wrap with position: relative and position the buttons absolutely.
That worked, the problem is that now the nav buttons control all sliders and i can't figure out a way to solve this.
I don't want to initialize multiple sliders with different classes if the slider is the same with different content.
JSFiddle
var sliderProdutosDestaque = new Swiper('.slider-produtos-destaque.swiper-container', {
slidesPerView: 2,
spaceBetween: 10,
navigation: {
nextEl: '.swiper-next',
prevEl: '.swiper-prev',
}
});
body {
padding: 20px 60px 40px;
}
.slider-produtos-wrap {
position: relative;
width: 100%;
margin-top: 20px;
}
.swiper-slide {
z-index: 1;
height: 150px;
background: blue;
}
.swiper-prev,
.swiper-next {
width: 60px;
height: 60px;
background: red;
position: absolute;
top: 50%;
transform: translateY(-50%);
border-radius: 60px;
z-index: 9999;
}
.swiper-prev {
left: -30px;
}
.swiper-next {
right: -30px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.0/css/swiper.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.0/js/swiper.min.js"></script>
<div class="slider-produtos-wrap">
<div class="slider-produtos-destaque swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
</div>
<div class="swiper-prev"></div>
<div class="swiper-next"></div>
</div>
<div class="slider-produtos-wrap">
<div class="slider-produtos-destaque swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
</div>
<div class="swiper-prev"></div>
<div class="swiper-next"></div>
</div>
Easy, tiny and tidy.
document.querySelectorAll('.swiper-container').forEach(function(elem) {
new Swiper(elem, {
slidesPerView: 2,
spaceBetween: 10,
navigation: {
nextEl: elem.nextElementSibling.nextElementSibling,
prevEl: elem.nextElementSibling,
}
});
});
body {
padding: 20px 60px 40px;
}
.slider-produtos-wrap {
position: relative;
width: 100%;
margin-top: 20px;
}
.swiper-slide {
z-index: 1;
height: 150px;
background: blue;
}
.swiper-prev,
.swiper-next {
width: 60px;
height: 60px;
background: red;
position: absolute;
top: 50%;
transform: translateY(-50%);
border-radius: 60px;
z-index: 9999;
}
.swiper-prev {
left: -30px;
}
.swiper-next {
right: -30px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.0/css/swiper.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.0/js/swiper.min.js"></script>
<div class="slider-produtos-wrap">
<div class="slider-produtos-destaque swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
</div>
<div class="swiper-prev"></div>
<div class="swiper-next"></div>
</div>
<div class="slider-produtos-wrap">
<div class="slider-produtos-destaque swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
</div>
<div class="swiper-prev"></div>
<div class="swiper-next"></div>
</div>
A possible solution is to loop through the elements that contain the slider container, and then grabbing the elements that are required (Swiper, Next Btn, Prev Btn) and using this in the setup for the Swiper.
var x = document.getElementsByClassName("slider-produtos-wrap");
for(var i = 0; i < x.length; i++) {
var el = x[i];
var swiper = el.getElementsByClassName("swiper-container")[0];
var nx = el.getElementsByClassName("swiper-next")[0];
var pr = el.getElementsByClassName("swiper-prev")[0];
new Swiper(swiper, {
slidesPerView: 2,
spaceBetween: 10,
navigation: {
nextEl: nx,
prevEl: pr
}
});
}
JSFiddle
Another way for anyone that might find it useful. Pass in count as a props with a different value for each slider. I did count="1" and count="2". This gives each sliders navigation arrows a different class so they will work independently of each other
<div :class="'swiper-button-prev-' + count" slot="button-prev"></div>
<div :class="'swiper-button-next-' + count" slot="button-next"></div>
props: ['count'],
data() {
return {
swiperOption: {
slidesPerView: 'auto',
spaceBetween: 45,
grabCursor: true,
centerInsufficientSlides: true,
navigation: {
nextEl: `.swiper-button-next-${this.count}`,
prevEl: `.swiper-button-prev-${this.count}`
}
}
}
.swiper-container {
width: 100%;
height: 400px;
padding: 0 50px;
}
.swiper-container::before{
content: "";
display: block;
background: #fff;
left: 0;
position: absolute;
top: 0;
height: 400px;
width: 40px;
z-index: 9;
}
.swiper-container::after{
content: "";
display: block;
background: #fff;
right: 0;
position: absolute;
top: 0;
height: 400px;
width: 40px;
z-index: 9;
}

How can I make my owl carousel direction follow the mouse wheel direction

When i scroll mouse wheel it moves but when i change scrolling direction it does not change its direction.
How can i make my owl carousel direction follow the mouse wheel direction ?
When i scroll mouse wheel it moves but when i change scrolling direction it does not change its direction.
How can i make my owl carousel direction follow the mouse wheel direction ?
var owl = $('.owl-carousel');
owl.owlCarousel({
loop: true,
margin: 10,
padding: 10,
responsiveClass: true,
rtl: false,
stagePadding: 100,
smartSpeed: 550,
autoplay: true,
autoplayTimeout: 1000,
autoplayHoverPause: true,
nav: true,
responsiveClass: true,
responsive: {
0: {
items: 1,
nav: true
},
600: {
items: 3,
nav: true
},
1000: {
items: 5,
nav: true,
}
}
})
owl.on('mousewheel', '.owl-stage', function (e) {
if (e.deltaY > 0) {
owl.trigger('next.owl');
} else {
owl.trigger('prev.owl');
}
e.preventDefault();
});
html{
width: 100vw;
background: linear-gradient(0deg,#aaaaaa,#f0f0f0) no-repeat;
}
.demo-container{
margin-top: 5em;
background: linear-gradient(0deg,#aaaaaa,#f0f0f0);
}
.owl-carousel .owl-stage-outer{
overflow: visible;
}
.sb-carousel-wrap {
position: relative;
margin-left: -15px;
margin-right: -15px;
z-index: 1;
}
.sb-carousel-wrap .brand-carousel-gradient {
position: absolute;
top: 0;
width: 105px;
height: 100%;
z-index: 10;
}
.brand-carousel-gradient.left {
left: 0;
background-image: linear-gradient(to left, rgba(255, 255, 255, 0.0), #fbfbfb);
}
.brand-carousel-gradient.right {
right: 0;
background-image: linear-gradient(to right, rgba(255, 255, 255, 0.0), #fbfbfb);
}
.sb-car-img{
overflow: hidden;
}
.sb-car-img:hover img{
transform: scale(1.2);
}
.sb-itm-img {
transition: all 0.6s ease-in 0s;
-webkit-transition: all 0.6s ease-in 0s;
-ms-transition: all 0.6s ease-in 0s;
}
.my-slider{
float: left:
width:100%;
padding: 0 15px;
overflow: hidden;
}
<div class="my-slider">
<div class="sb-carousel-wrap">
<div class="brand-carousel-gradient left"></div>
<div class="brand-carousel-gradient right"></div>
<div class="demo-container">
<div class="owl-carousel owl-theme">
<div class="item">
<div class="sb-car-img">
<img src="https://images.pexels.com/photos/923361/pexels-photo-923361.jpeg?auto=compress&cs=tinysrgb&h=350" class="sb-itm-img" alt="">
</div>
</div>
<div class="item">
<div class="sb-car-img">
<img src="https://images.pexels.com/photos/923361/pexels-photo-923361.jpeg?auto=compress&cs=tinysrgb&h=350" class="sb-itm-img" alt="">
</div>
</div>
<div class="item">
<div class="sb-car-img">
<img src="https://images.pexels.com/photos/923361/pexels-photo-923361.jpeg?auto=compress&cs=tinysrgb&h=350" class="sb-itm-img" alt="">
</div>
</div>
<div class="item">
<div class="sb-car-img">
<img src="https://images.pexels.com/photos/923361/pexels-photo-923361.jpeg?auto=compress&cs=tinysrgb&h=350" class="sb-itm-img" alt="">
</div>
</div>
<div class="item">
<div class="sb-car-img">
<img src="https://images.pexels.com/photos/923361/pexels-photo-923361.jpeg?auto=compress&cs=tinysrgb&h=350" class="sb-itm-img" alt="">
</div>
</div>
<div class="item">
<div class="sb-car-img">
<img src="https://images.pexels.com/photos/923361/pexels-photo-923361.jpeg?auto=compress&cs=tinysrgb&h=350" class="sb-itm-img" alt="">
</div>
</div>
<div class="item">
<div class="sb-car-img">
<img src="https://images.pexels.com/photos/923361/pexels-photo-923361.jpeg?auto=compress&cs=tinysrgb&h=350" class="sb-itm-img" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
<link rel="stylesheet" type="text/css" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
I had the same issue.
In Chrome developer tools (F12), inspect the wheel event with a log:
console.log(e);
This will show you that e.deltaY does not exist in the event object. However, the property e.originalEvent does, and e.originalEvent.deltaY exists here.
Therefore, change the callback to this:
...
if (e.originalEvent.deltaY > 0) {
...
The scroll should work correctly in both directions now.
[edit] I looked into getting it working in IE(11). IE11 shows the wheel event object property e.originalEvent.wheelDelta which is not present in the Chrome object, and this can be used in the same way as deltaY.
In this case, we can use
...
if (e.originalEvent.wheelDelta> 0) {
...
and it should work on both Chrome and IE11.
To get this working in Firefox as well, a different callback event AND property is needed:
Callback is DOMMouseScroll and property to test is e.originalEvent.detail, as follows:
owl.on('DOMMouseScroll','.owl-stage',function(e){
if (e.originalEvent.detail > 0){
owl.trigger('next.owl');
}
else {
owl.trigger('prev.owl');
}
e.preventDefault();
});
As a side note, I looked at the Owl demo, and this does indeed run as described in the documentation, using e.deltaY.
I had the same issue.
To solve this problem simply replace:
if (e.deltaY > 0) {
with:
if (e.originalEvent.deltaY>0){

How to keep owl carousel fit in the window?

Sorry i don't know how to place code properly into snippet. This is my owl carousel and its width gets larger to the right direction outside the window. I am a newbie, i googled but could not find the correct thread. I need help to fit my owl carousel inside the window.
Here is what it looks like shown below.
var owl = $('.owl-carousel');
owl.owlCarousel({
loop: true,
margin: 10,
padding: 10,
responsiveClass: true,
rtl: false,
stagePadding: 100,
smartSpeed: 550,
autoplay: true,
autoplayTimeout: 1000,
autoplayHoverPause: true,
nav: true,
responsiveClass: true,
responsive: {
0: {
items: 1,
nav: true
},
600: {
items: 3,
nav: true
},
1000: {
items: 5,
nav: true,
}
}
})
owl.on('mousewheel', '.owl-stage', function (e) {
if (e.deltaY > 0) {
owl.trigger('next.owl');
} else {
owl.trigger('prev.owl');
}
e.preventDefault();
});
html{
width: 100vw;
background: linear-gradient(0deg,#aaaaaa,#f0f0f0) no-repeat;
}
.demo-container{
margin-top: 5em;
background: linear-gradient(0deg,#aaaaaa,#f0f0f0);
}
.owl-carousel .owl-stage-outer{
overflow: visible;
}
.sb-carousel-wrap {
position: relative;
margin-left: -15px;
margin-right: -15px;
z-index: 1;
}
.sb-carousel-wrap .brand-carousel-gradient {
position: absolute;
top: 0;
width: 105px;
height: 100%;
z-index: 10;
}
.brand-carousel-gradient.left {
left: 0;
background-image: linear-gradient(to left, rgba(255, 255, 255, 0.0), #fbfbfb);
}
.brand-carousel-gradient.right {
right: 0;
background-image: linear-gradient(to right, rgba(255, 255, 255, 0.0), #fbfbfb);
}
.sb-car-img:hover{
padding: 0.5em 0em 0em 0em;
background: url("phone.png") no-repeat center;
background-size: cover;
z-index: 1;
}
.sb-itm-img:hover {
padding: 2.3em 2em 4em 2em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sb-carousel-wrap">
<div class="brand-carousel-gradient left"></div>
<div class="brand-carousel-gradient right"></div>
<div class="demo-container">
<div class="owl-carousel owl-theme">
<div class="item">
<div class="sb-car-img">
<img src="restaurant.png" class="sb-itm-img" alt="">
</div>
</div>
<div class="item">
<div class="sb-car-img">
<img src="musician.png" class="sb-itm-img" alt="">
</div>
</div>
<div class="item">
<div class="sb-car-img">
<img src="travel.png" class="sb-itm-img" alt="">
</div>
</div>
<div class="item">
<div class="sb-car-img">
<img src="fashion.png" class="sb-itm-img" alt="">
</div>
</div>
<div class="item">
<div class="sb-car-img">
<img src="health.png" class="sb-itm-img" alt="">
</div>
</div>
<div class="item">
<div class="sb-car-img">
<img src="phptographer.png" class="sb-itm-img" alt="">
</div>
</div>
<div class="item">
<div class="sb-car-img">
<img src="modeling.png" class="sb-itm-img" alt="">
</div>
</div>
</div>
</div>
</div>
Try below implemented slider
var owl = $('.owl-carousel');
owl.owlCarousel({
loop: true,
margin: 10,
padding: 10,
responsiveClass: true,
rtl: false,
stagePadding: 100,
smartSpeed: 550,
autoplay: true,
autoplayTimeout: 1000,
autoplayHoverPause: true,
nav: true,
responsiveClass: true,
responsive: {
0: {
items: 1,
nav: true
},
600: {
items: 3,
nav: true
},
1000: {
items: 5,
nav: true,
}
}
})
owl.on('mousewheel', '.owl-stage', function (e) {
if (e.deltaY > 0) {
owl.trigger('next.owl');
} else {
owl.trigger('prev.owl');
}
e.preventDefault();
});
html{
width: 100vw;
background: linear-gradient(0deg,#aaaaaa,#f0f0f0) no-repeat;
}
.demo-container{
margin-top: 5em;
background: linear-gradient(0deg,#aaaaaa,#f0f0f0);
}
.owl-carousel .owl-stage-outer{
overflow: visible;
}
.sb-carousel-wrap {
position: relative;
margin-left: -15px;
margin-right: -15px;
z-index: 1;
}
.sb-carousel-wrap .brand-carousel-gradient {
position: absolute;
top: 0;
width: 105px;
height: 100%;
z-index: 10;
}
.brand-carousel-gradient.left {
left: 0;
background-image: linear-gradient(to left, rgba(255, 255, 255, 0.0), #fbfbfb);
}
.brand-carousel-gradient.right {
right: 0;
background-image: linear-gradient(to right, rgba(255, 255, 255, 0.0), #fbfbfb);
}
.sb-car-img{
overflow: hidden;
}
.sb-car-img:hover img{
transform: scale(1.2);
}
.sb-itm-img {
transition: all 0.6s ease-in 0s;
-webkit-transition: all 0.6s ease-in 0s;
-ms-transition: all 0.6s ease-in 0s;
}
.my-slider{
float: left:
width:100%;
padding: 0 15px;
overflow: hidden;
}
<div class="my-slider">
<div class="sb-carousel-wrap">
<div class="brand-carousel-gradient left"></div>
<div class="brand-carousel-gradient right"></div>
<div class="demo-container">
<div class="owl-carousel owl-theme">
<div class="item">
<div class="sb-car-img">
<img src="https://images.pexels.com/photos/923361/pexels-photo-923361.jpeg?auto=compress&cs=tinysrgb&h=350" class="sb-itm-img" alt="">
</div>
</div>
<div class="item">
<div class="sb-car-img">
<img src="https://images.pexels.com/photos/923361/pexels-photo-923361.jpeg?auto=compress&cs=tinysrgb&h=350" class="sb-itm-img" alt="">
</div>
</div>
<div class="item">
<div class="sb-car-img">
<img src="https://images.pexels.com/photos/923361/pexels-photo-923361.jpeg?auto=compress&cs=tinysrgb&h=350" class="sb-itm-img" alt="">
</div>
</div>
<div class="item">
<div class="sb-car-img">
<img src="https://images.pexels.com/photos/923361/pexels-photo-923361.jpeg?auto=compress&cs=tinysrgb&h=350" class="sb-itm-img" alt="">
</div>
</div>
<div class="item">
<div class="sb-car-img">
<img src="https://images.pexels.com/photos/923361/pexels-photo-923361.jpeg?auto=compress&cs=tinysrgb&h=350" class="sb-itm-img" alt="">
</div>
</div>
<div class="item">
<div class="sb-car-img">
<img src="https://images.pexels.com/photos/923361/pexels-photo-923361.jpeg?auto=compress&cs=tinysrgb&h=350" class="sb-itm-img" alt="">
</div>
</div>
<div class="item">
<div class="sb-car-img">
<img src="https://images.pexels.com/photos/923361/pexels-photo-923361.jpeg?auto=compress&cs=tinysrgb&h=350" class="sb-itm-img" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
<link rel="stylesheet" type="text/css" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>

Can't use Slick-Slider with Dynamic data whwn pulling from external API

Trying to build a website with some sliders.for slider i used SLICK slider.Here is my code .
<template>
<div class="homePopularVenue">
<div class="container">
<h2 class="text-center sub-headwords">POPULAR VENUE</h2>
<!--slider start-->
<div class="home-slider-popular-venue">
<div>
<div class="well">
<span class="half-image-temp">
<img class="img-rsponsive" src=" http://placehold.it/250x150" alt="">
</span>
<span class="half-content-temp">
<h3 class="title">HELLOW</h3>
<h5 class="small">Welcome to Hellow World</h5>
BOOK NOW
</span>
</div>
</div>
</div>
<div class="text-center">
VIEW ALL
</div>
</div>
</div>
</template>
<script>
export default {
name: 'homePopularVenue',
data () {
return {
posts: []
}
},
mounted() {
this.create();
this.$http.get('https://newsapi.org/v1/sources?language=en')
.then(response => {
console.log(response.data);
this.posts = response.data.source;
})
},
methods:{
create (){
$('.home-slider-popular-venue').slick({
slidesToShow: 4,
slidesToScroll: 1,
infinite: true,
dots: true,
autoplay: true,
autoplaySpeed: 2000,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 2,
slidesToScroll: 1
}
}
]
});
}
},
created: function(){
}
}
</script>
<style scoped>
.sub-headwords:after{
content:"";
width:200px;
background: #F99A13;
height: 4px;
display: block;
margin: auto;
margin-top: 15px;
margin-bottom: 30px;
}
.home-slider-popular-venue .well{
box-shadow: 2px 4px 8px 0 rgba(46,61,73,.2);
margin: 30px 10px;
transition: .2s ease-in-out;
}
.home-slider-popular-venue .well:hover{
box-shadow: 12px 15px 20px 0 rgba(46,61,73,.15);
}
.half-image-temp{
max-height: 250px;
}
.half-image-temp img{
width: 100%;
display: block;
margin: auto;
}
.half-content-temp{
}
</style>
Everything was good before i put the data dynamicaly in slider, after putting the data dynamically in slider its not working.
<template>
<div class="homePopularVenue">
<div class="container">
<h2 class="text-center sub-headwords">POPULAR VENUE</h2>
<!--slider start-->
<div class="home-slider-popular-venue">
<div v-for="post in posts">
<div class="well">
<span class="half-image-temp">
<img class="img-rsponsive" src=" http://placehold.it/250x150" alt="">
</span>
<span class="half-content-temp">
<h3 class="title">HELLOW</h3>
<h5 class="small">Welcome to Hellow World</h5>
<p> {{post.id}} </p>
BOOK NOW
</span>
</div>
</div>
</div>
<div class="text-center">
VIEW ALL
</div>
</div>
</div>
</template>
Also the same problem is happening with OWl.Carousel.