I have slick slider on my page. After click on Next or Previous arrows in slick slider autoplay stop working. But when I click on any place on the page it starts to autoplay again. How I can fix this? I need to have autoplay even after arrow click.
JS:
jQuery(document).ready(function ($) {
var $slider = $('.slider');
if ($slider.length) {
$slider.slick({
slidesToShow: 7,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 1500,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
autoplay: true,
autoplaySpeed: 1500
}
},
{
breakpoint: 600,
settings: {
autoplay: true,
autoplaySpeed: 1500,
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 1500
}
}
]
});
}
});
To fix this need to add:
pauseOnFocus: false,
pauseOnHover: false
Related
error image
` // References swiper slider start here ------------------------------>
var mySwiper = new Swiper(".references-slider", {
slidesPerView: 1,
initialSlide: 1,
centeredSlides: true,
spaceBetween: 32,
pagination: {
el: ".swiper-pagination",
type: "fraction",
},
navigation: {
nextEl: ".right-arrow",
prevEl: ".left-arrow",
},
scrollbar: {
el: '.swiper-scrollbar',
draggable: true,
snapOnRelease: true,
direction : 'horizontal'
},
// Responsive breakpoints
breakpoints: {
// when window width is >= 320px
320: {
slidesPerView: 2,
spaceBetween: 20
},
// when window width is >= 480px
480: {
slidesPerView: 3,
spaceBetween: 30
},
// when window width is >= 640px
640: {
slidesPerView: 4,
spaceBetween: 40
}
}
});
mySwiper.setTranslate(-72,0,0);`
Also the setTranslate is not working.
Please help me to fix and use swiper function as how ?
I am basically trying to add this onto the site
https://codepen.io/pnmcosta/pen/GYpxgr
Placing that on one of the components and it gives the following error
render function or template not defined in component: FirstPageSecondSection
Basically just adding that onto the script,style and template
Here is one of the example when I added the script
<script>
export default {
data:() =>({
})
}
$(function() {
$('.slider-services').slick({
dots: true,
appendDots: '.slider-dots',
arrows: true,
infinite: false,
slidesToScroll: 3,
slidesToShow: 3,
accessibility: true,
variableWidth: false,
focusOnSelect: false,
centerMode: false,
responsive: [
{
breakpoint: 992,
settings: {
slidesToScroll: 2,
slidesToShow: 2
}
},
{
breakpoint: 600,
settings: {
slidesToScroll: 1,
slidesToShow: 1
}
}
]
});
});
</script>
I am new on Nuxtjs and hoping for an enlighment from the seniors.
This one is using slick carousel. It is based on jQuery. Since you're using VueJS, I do recommend to use any other carousel than trying to use some imperative hacky code.
VueJS is declarative, hence not relying on jQuery (imperative) may be a good idea. Also, VueJS is enough by itself to not bring a whole jQuery on top of your code base (more JS for nothing really).
Here is a whole list of carousels that you can use: https://github.com/vuejs/awesome-vue#carousel
I found and used vue-silentbox, not the smallest but doing it's job well.
I've used it on this website, click on an image and you'll see the carousel.
A code example can be found here: https://github.com/kissu/pet-friends/blob/master/src/views/Home.vue#L26
Formatted and modified code of OP, this one by itself is not working because we need to define jQuery too (otherwise $ will be undefined). Still, NOT a solution that I do recommend.
<script>
export default {
mounted() {
$(function () {
$('.slider-services').slick({
dots: true,
appendDots: '.slider-dots',
arrows: true,
infinite: false,
slidesToScroll: 3,
slidesToShow: 3,
accessibility: true,
variableWidth: false,
focusOnSelect: false,
centerMode: false,
responsive: [
{
breakpoint: 992,
settings: {
slidesToScroll: 2,
slidesToShow: 2,
},
},
{
breakpoint: 600,
settings: {
slidesToScroll: 1,
slidesToShow: 1,
},
},
],
})
})
},
}
</script>
I added Slick slider for any device under 1024px, however every time a button within the div is clicked and the page is refreshed, the slider is gone and it leaves a mess. It fixes itself if I change the device width from the console. I tried adding a function to reinitialize it every time a button is clicked, but for some reason 'reInit' does not work. I can't provide Jsfiddle, if someone could help based on my description, I would appreciate it.
function slickify(){
event.preventDefault();
$('.cart-list').not('.slick-initialized').slick({
infinite: false,
responsive: [
{
breakpoint: 1024,
autoplay: false,
dots: true,
infinite: false,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
dots: true
}
},
{
breakpoint: 786,
autoplay: false,
dots: true,
infinite: false,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
dots: true
}
},
{
breakpoint: 550,
autoplay: false,
dots: true,
infinite: false,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
dots: true
}
}
]
});
}
$(window).resize(function(){
event.preventDefault();
var $windowWidth = $(window).width();
if ($windowWidth < 1024) {
slickify();
$(window).resize(function() {
$('.cart-list').slick('resize');
event.preventDefault();
});
$(window).on('orientationchange', function() {
$('.cart-list').slick('resize');
event.preventDefault();
});
}
});
$('.cart-list').on('click', function() {
$('.cart-list').slick('reInit');
});
});
I've tried adding a simple function such as :
('body').on('click', function() {
('.slick-slider-div').slick('reInit');
});
where reInit is reinitialization as per Slick.JS documentation. However, it breaks any click event on the page. I also tried to make the click event only withing the div, still no result. The '.slick-initialized' class just disappears on click event.
I'm using bxslider and I want to make only one slide appear when on tablet and mobile (768px and down), but when above 768px then I'd like 6+ slides to appear. Can anyone help me out with this please?
<script>
$(function(){
$('.bxslider').bxSlider({
captions: true,
speed: 900,
pause: 7000,
startSlide: 0,
infiniteLoop: true,
auto: true,
video: true,
touchEnabled: false,
pager: false,
});
});
if ( $(window).width() < 768) {
var myslider = $('.bxslider').bxSlider({
...
maxSlides : 1,
});
}
else {
var myslider = $('.bxslider').bxSlider({
...
maxSlides : 4,
});
}
</script>
If anyone could help that would be amazing.
You can try to remove the first bxSlider() instance, you call it only inside of the conditions:
<script>
$(document).ready(function(){
$(function(){
if( $(window).width() < 768) {
$('.bxslider').bxSlider({
captions: true,
speed: 900,
pause: 7000,
startSlide: 0,
infiniteLoop: true,
auto: true,
video: true,
touchEnabled: false,
pager: false,
maxSlides: 1
});
} else {
$('.bxslider').bxSlider({
captions: true,
speed: 900,
pause: 7000,
startSlide: 0,
infiniteLoop: true,
auto: true,
video: true,
touchEnabled: false,
pager: false,
maxSlides: 4
});
}
});
});
</script>
I'm using vue-awesome-swiper and it shows several pictures per slide. What could be probable cause?
Here is my pug:
.worklist_block-background
swiper.gallery-top(:options='swiperOptionTop', ref='swiperTop')
swiper-slide(v-for='(item, idx) in swiperItems' :key='idx' :class='slide-'+(idx+1))
img(:src='item.bigImage')
.worklist_block-small
swiper.gallery-thumbs(:options='swiperOptionThumbs', ref='swiperThumbs')
swiper-slide.swiper__thumb-position(v-for='(item, idx) in swiperItems' :key='idx' :class='slide-'+(idx+1))
img(:src='item.smallImage')
.swiper-button-next(slot='button-next')
.swiper-button-prev(slot='button-prev')
and my data()
data: () => ({
swiperOptionTop: {
setWrapperSize: true,
},
swiperOptionThumbs: {
spaceBetween: 10,
centeredSlides: true,
slidesPerView: "auto",
touchRatio: 0.2,
slideToClickedSlide: true,
observeParents: true,
centeredSlides: true,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
},