We Keep Coding

SwiperJS move more than just one slide on click

I want to implement the feature, when I click arrow it moves 3 or 4 slides to the right or to the left, not just one slide.
I am working with Angular
Feature, when it moves one slide works, but I can't get moving more than just one slide to work.
Here is code for moving just one slide to the right or to the left
scrollLeft() {
this.swiper!.swiperRef.slidePrev(500);
this.scrollArrows();
}
scrollRight() {
this.swiper!.swiperRef.slideNext(500);
this.scrollArrows();
}
Config:
swiperConfig: any = {
slidesPerView: 'auto',
loop: true,
spaceBetween: 20,
autoplay: {
delay: 1000,
disableOnInteraction: false,
},
};
Thanks for everyone to help.

OWL Carousel Fade Transition Speed

Am using OWL v2.0 and load animate.css to support 'fadeIn' and 'fadeOut', but having difficulty in trying to extend the transition time of the fade between slide 1 and slide 2. Seems to a constant 1 second or so whatever I try.
owl.owlCarousel({
nav: false, // Show next and prev buttons
items: 1,
smartSpeed: 10000,
dotsSpeed: 1000,
dragEndSpeed: 1000,
singleItem: true,
animateIn: 'fadeIn',
animateOut: 'fadeOut',
pagination: false,
autoplay: true,
autoplayTimeout: 5000,
autoplayHoverPause: false,
loop: true,
afterAction: function (el) {
//remove class active
this
.$owlItems
.removeClass('active')
//add class active
this
.$owlItems //owl internal $ object containing items
.eq(this.currentItem + 1)
.addClass('active')
}
});
Any ideas, thanks.

The transition duration is in the owl.carousel.css file. At line 103 you should have:
.owl-carousel .animated {
animation-duration: 1000ms;
animation-fill-mode: both; }
try changing the animation-duration of 1000ms to your desired duration.

That's the autoplayTimeout you are talking about. No need to override the css.
Change the autoplayTimeout to 1000 when you want that the next slide will happen after 1 sec.
Change the autoplaySpeed to 2000, when you want that that slide has a slide effect that takes up 2 sec.
So when setting this: the first slide take 2 sec of duration when sliding. After 1 sec, the next will slide for 2sec, and so on...

Making to slide more than one item ahead in OwlCarousel

I having two synced OwlCarousel sliders. The goal is to achieve - group of items sliding in first main slider. Now it's sliding from 1 to 2 to 3 etc. I need it to slide from 1 to 5. Is there some values i can change in js?
https://codepen.io/washaweb/pen/KVRxRW
.owlCarousel({
items : slidesPerPage,
dots: false,
nav: false,
autoplay: false,
smartSpeed: 200,
slideSpeed : 500,
mouseDrag: false,
touchDrag: false,
pullDrag: false,
slideBy: '1', //alternatively you can slide by 1, this way the active slide will stick to the first item in the second carousel
responsiveRefreshRate : 100
And how can i change sliding animation? For example fadein

You could try to.owl.carousel event:
var jumpTo = 5;
$('#sync2').trigger('to.owl.carousel', jumpTo);
Carousel #sync2 jumps to slide number 5. You can trigger this by other owl events or by clicks.

Dynamic javascript that is echoed by php doesn't work

I'm echoing a javascript snippet with php. the problem is that when I load that snippet dynamically, it doesn't work. but when I put generated javascript right in the place and comment the php, it works.
CODE :
<script type="text/javascript">
$(document).ready(function(){
$.supersized({
// Functionality
slideshow : 1, // Slideshow on/off
autoplay : 1, // Slideshow starts playing automatically
start_slide : 1, // Start slide (0 is random)
stop_loop : 0, // Pauses slideshow on last slide
random : 0, // Randomize slide order (Ignores start slide)
slide_interval : 5000, // Length between transitions
transition : 2, // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
transition_speed : 600, // Speed of transition
new_window : 1, // Image links open in new window/tab
pause_hover : 0, // Pause slideshow on hover
keyboard_nav : 1, // Keyboard navigation on/off
performance : 1, // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
image_protect : 1, // Disables image dragging and right click with Javascript
// Size & Position
min_width : 0, // Min width allowed (in pixels)
min_height : 0, // Min height allowed (in pixels)
vertical_center : 1, // Vertically center background
horizontal_center : 1, // Horizontally center background
fit_always : 0, // Image will never exceed browser width or height (Ignores min. dimensions)
fit_portrait : 1, // Portrait images will not exceed browser height
fit_landscape : 0, // Landscape images will not exceed browser width
// Components
slide_links : 'blank', // Individual links for each slide (Options: false, 'num', 'name', 'blank')
thumb_links : 0, // Individual thumb links for each slide
thumbnail_navigation : 0, // Thumbnail navigation
slides : [ // Slideshow Images
<?php
$loop = new WP_Query('post_type=slide');
if($loop->have_posts()):while($loop->have_posts()):$loop->the_post();
?>
{
image : '<?php the_field('slide_pic'); ?>',
title : '<h2><?php the_content(); ?></h2>',
thumb : '',
url : ''
},
<?php endwhile;endif;wp_reset_query(); ?>
],
// Theme Options
progress_bar : 0, // Timer for each slide
mouse_scrub : 0
});
});
</script>
Generated javascript:
<script type="text/javascript">
$(document).load(function(){
$.supersized({
// Functionality
slideshow : 1, // Slideshow on/off
autoplay : 1, // Slideshow starts playing automatically
start_slide : 1, // Start slide (0 is random)
stop_loop : 0, // Pauses slideshow on last slide
random : 0, // Randomize slide order (Ignores start slide)
slide_interval : 5000, // Length between transitions
transition : 2, // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
transition_speed : 600, // Speed of transition
new_window : 1, // Image links open in new window/tab
pause_hover : 0, // Pause slideshow on hover
keyboard_nav : 1, // Keyboard navigation on/off
performance : 1, // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
image_protect : 1, // Disables image dragging and right click with Javascript
// Size & Position
min_width : 0, // Min width allowed (in pixels)
min_height : 0, // Min height allowed (in pixels)
vertical_center : 1, // Vertically center background
horizontal_center : 1, // Horizontally center background
fit_always : 0, // Image will never exceed browser width or height (Ignores min. dimensions)
fit_portrait : 1, // Portrait images will not exceed browser height
fit_landscape : 0, // Landscape images will not exceed browser width
// Components
slide_links : 'blank', // Individual links for each slide (Options: false, 'num', 'name', 'blank')
thumb_links : 0, // Individual thumb links for each slide
thumbnail_navigation : 0, // Thumbnail navigation
slides : [ // Slideshow Images
{
image : 'http://mahpari.dev/wp-content/uploads/2014/07/image4.jpg',
title : '<h2><p>شعار مورد نظر 2</p>
</h2>',
thumb : '',
url : ''
},
{
image : 'http://mahpari.dev/wp-content/uploads/2014/07/image1.jpg',
title : '<h2><p>شعار مورد نظر 1</p>
</h2>',
thumb : '',
url : ''
},
],
// Theme Options
progress_bar : 0, // Timer for each slide
mouse_scrub : 0
});
});
</script>
Any ideas?

The problem seems to be the line breaks. This will produce an error. (SyntaxError: Unexpected EOF)
title : '<h2><p>شعار مورد نظر 2</p>
</h2>',
It should be better like that:
title : '<h2><p>شعار مورد نظر 2</p>\n</h2>',

Here, at the end of your "while" loop:
url : ''
}, // <--dangling comma
],
Internet Explorer is particular harsh on those and will puke with a syntax error.

Supersized - choose different set of slides

I an using Supersized plugin for my site and would like to know if it is possible to do do the following:
I have 5 sets of pictures, 2 pictures in a set.
When page loads, play RANDOMLY one set and then stop.
Basically, i want to supersized choose different set of slides each time the page reloads.
Thank you for any help.

I figured it up myself:
var setnum;
setnum = Math.floor((Math.random()*5)+1);
switch (setnum)
{
case 1:
jQuery(function($){
$.supersized({
// Functionality
slide_interval : 5000, // Length between transitions
transition : 1, // 0one, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
transition_speed : 3000, // Speed of transition
stop_loop : 1, //Pauses slideshow upon reaching the last slide.
// Components
slide_links : 'blank', // Individual links for each slide (Options: false, 'num', 'name', 'blank')
slides : [ // Slideshow Images
{image : 'image1.jpg'},
{image : 'image1-2.jpg'},
]
});
});
break;
case 2:
jQuery(function($){
$.supersized({
// Functionality
slide_interval : 5000, // Length between transitions
transition : 1, // 0one, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
transition_speed : 3000, // Speed of transition
stop_loop : 1, //Pauses slideshow upon reaching the last slide.
// Components
slide_links : 'blank', // Individual links for each slide (Options: false, 'num', 'name', 'blank')
slides : [ // Slideshow Images
{image : 'image2.jpg'},
{image : 'image2-2.jpg'},
]
});
});
break;
case 3:
jQuery(function($){
$.supersized({
// Functionality
slide_interval : 5000, // Length between transitions
transition : 1, // 0one, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
transition_speed : 3000, // Speed of transition
stop_loop : 1, //Pauses slideshow upon reaching the last slide.
// Components
slide_links : 'blank', // Individual links for each slide (Options: false, 'num', 'name', 'blank')
slides : [ // Slideshow Images
{image : 'image3.jpg'},
{image : 'image3-2.jpg'},
]
});
});
break;
case 4:
jQuery(function($){
$.supersized({
// Functionality
slide_interval : 5000, // Length between transitions
transition : 1, // 0one, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
transition_speed : 3000, // Speed of transition
stop_loop : 1, //Pauses slideshow upon reaching the last slide.
// Components
slide_links : 'blank', // Individual links for each slide (Options: false, 'num', 'name', 'blank')
slides : [ // Slideshow Images
{image : 'image4.jpg'},
{image : 'image4-2.jpg'},
]
});
});
break;
case 5:
jQuery(function($){
$.supersized({
// Functionality
slide_interval : 5000, // Length between transitions
transition : 1, // 0one, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
transition_speed : 3000, // Speed of transition
stop_loop : 1, //Pauses slideshow upon reaching the last slide.
// Components
slide_links : 'blank', // Individual links for each slide (Options: false, 'num', 'name', 'blank')
slides : [ // Slideshow Images
{image : 'image5.jpg'},
{image : 'image5-2.jpg'},
]
});
});
break;
}