I have an html page contain a div called wowslider-container1. I want to recreate the elements inside the wowslider-container1 when the values of properties such as duration and delay change. If I create another slider, it will create multiple sliders. If I hide, both will hide. What can I do? I don't need multiple sliders.
Duration:<input type="number" id="txtDuration" />
Delay<input type="number" id="txtDelay" />
<button onclick="set()">Set </button>
<br/>
<br/>
<div>
<div id="wowslider-container1">
<div class="ws_images">
<ul>
<li>
<a href='SBG_ANA2019_Brochure.pdf' target='_blank' title='Consign.' style="cursor: pointer">
<img id="wows1_0" class="imgMain" src="SBG_HomePg_ANA2019_1146x405V3.jpg" len="0" alt="Consign." />
</a>
</li>
</ul>
</div>
</div>
</div>
script
var delay_value=100;
var duration_value=20;
function set() {
var dur=document.getElementById("txtDuration").value;
var del=document.getElementById("txtDelay").value;
setDuration(del, dur);
}
function setDuration(delay,duration) {
delay_value=delay;
duration_value=duration;
jQuery("#wowslider-container1").wowSlider({
effect: "fade",
prev: "",
next: "",
duration: duration_value * 100,
delay: delay_value * 100,
width: 900, height: 640,
autoPlay: true,
autoPlayVideo: false,
playPause: true,
stopOnHover: false,
loop: false,
bullets: 0,
caption: false,
captionEffect: "parallax",
controls: true,
controlsThumb: false,
responsive: 1,
fullScreen: false,
gestures: 2,
onBeforeStep: 0,
images: 0
});
}
setDuration(20,100);
The API shows that options can only be set during slider initialization (and there's no destroy() event), so you'll have to remove the events / elements and restart the slider:
http://wowslider.com/help/wowslider-api-184.html
HTML:
Duration: <input type="number" id="txtDuration">
Delay: <input type="number" id="txtDelay">
<button onclick="set()">Set </button>
<br><br>
<div class="wow-slider-container">
<div class="wow-slider">
<div class="images">
<ul>
<li>
<a href='SBG_ANA2019_Brochure.pdf' target='_blank' title='Consign.' style="cursor:pointer">
<img id="wows1_0" class="imgMain" src='SBG_HomePg_ANA2019_1146x405V3.jpg' len='0' alt="Consign.">
</a>
</li>
</ul>
</div>
</div>
</div>
Javascript:
<script type="text/javascript">
var wowSliderOptions = {
effect: 'fade',
prev: '',
next: '',
duration: 20,
delay: 100,
width: 900,
height: 640,
autoPlay: true,
autoPlayVideo: false,
playPause: true,
stopOnHover: false,
loop: false,
bullets: 0,
caption: false,
captionEffect: 'parallax',
controls: true,
controlsThumb: false,
responsive: 1,
fullScreen: false,
gestures: 2,
onBeforeStep: 0,
images: 0
}
var wowSliderContent = jQuery('.wow-slider').html();
var wowSlider = jQuery('.wow-slider').wowSlider(wowSliderOptions);
function set() {
// Set user-defined options
wowSliderOptions.duration = document.getElementById('txtDuration').value;
wowSliderOptions.delay = document.getElementById('txtDelay').value;
// Remove original WOW Slider instance
wowSlider.remove();
// Recreate original HTML slides
jQuery('.wow-slider-container').html(wowSliderContent);
// Start WOW Slider
wowSlider = jQuery('.wow-slider').wowSlider(wowSliderOptions);
}
</script>
Related
I have created a slider with some image items that is infinitely scrolling with autoplay.
I've disabled pause on hover and i want to prevent every single event that would trigger it to stop.
One specific thing with that is when I'm clicking on it several times, then it stops and i can drag it. I don't want this behaviour and i thing I've done everything to prevent it. I want it to be unstoppable
Those are mine Slick Carousel setting:
$(document).ready(() => {
$('.clients-slider').slick({
infinite: false,
slidesToShow: 6,
slidesToScroll: 1,
autoplay: true,
speed: 5000,
draggable: false,
swipe: false,
swipeToSlide: false,
centerMode: false,
arrows: false,
dots: false,
focusOnSelect: false,
accessibility: false,
touchMove: false,
pauseOnHover: false,
pauseOnFocus: false,
pauseOnSwipe: false,
cssEase: 'linear',
responsive: [
{
breakpoint: 1366,
settings: {
slidesToShow: 4
}
},
{
breakpoint: 768,
settings: {
slidesToShow: 3
}
}
],
});
});
Here is my html/php code (I'm doing it in wordpress):
<section class="clients" id="clients">
<h2 class="offer-head" style="max-width: 1300px;margin-left:auto;margin-right:auto;"><?php echo $partnerzy; ?></h2>
<div class="clients-slider" pause-on-hover="false" draggable="false">
<?php if( have_rows('slajder_partnerzy') ): ?>
<?php while( have_rows('slajder_partnerzy') ): the_row(); ?>
<img class="clients-slide-single" src="<?php echo get_sub_field('partner_logo'); ?>" alt="logo-client" />
<?php endwhile ?>
<?php endif ?>
</div>
Can anyone relate on this? Of course I'm properly importing jquery and slick carousel library.
This one seems to work, with infinite:true
$(document).ready(() => {
$('.clients-slider').slick({
infinite: true,
autoplaySpeed: 1000,
slidesToShow: 6,
slidesToScroll: 1,
autoplay: true,
speed: 1000,
delay: 1000,
draggable: false,
swipe: false,
swipeToSlide: false,
centerMode: false,
arrows: false,
dots: false,
focusOnSelect: false,
accessibility: false,
touchMove: false,
pauseOnHover: false,
pauseOnFocus: false,
pauseOnSwipe: false,
cssEase: 'linear',
responsive: [{
breakpoint: 1366,
settings: {
slidesToShow: 1
}
},
{
breakpoint: 768,
settings: {
slidesToShow: 1
}
}
],
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
Here is my html/php code (I'm doing it in wordpress):
<section class="clients" id="clients">
<h2 class="offer-head" style="max-width: 1300px;margin-left:auto;margin-right:auto;">
<?php echo $partnerzy; ?>
</h2>
<div class="clients-slider" pause-on-hover="false" draggable="false">
<?php if( have_rows('slajder_partnerzy') ): ?>
<?php while( have_rows('slajder_partnerzy') ): the_row(); ?>
<img class="clients-slide-single" src="https://picsum.photos/id/237/200/200" alt="logo-client" />
<img class="clients-slide-single" src="https://picsum.photos/200" alt="logo-client" />
<img class="clients-slide-single" src="https://picsum.photos/200/200" alt="logo-client" />
<?php endwhile ?>
<?php endif ?>
</div>
I have a problem with arrows on the slider on the website that I've published a few days ago. A link to a website is https://blackfox.ai/. The problem is that the left arrow (swiper-button-prev) does the same thing as the right arrow (swiper-button-next). In other words, when I click on the left arrow, I want the previous slide to come from left to right, not from right to left. Is there anybody who had a similar problem and can help me?
HTML code for these arrows is:
<div
class="swiper-button-prev"
style="margin-left: auto; margin-right: auto;width: 85%;"
tabindex="0"
role="button"
aria-label="Previous slide"></div>
<div
class="swiper-button-next"
style="margin-left: auto; margin-right: auto; width: 85%;"
tabindex="0"
role="button"
aria-label="Next slide"></div>
JavaScript code for the slider itself is:
// Testimonial Slider Three
var testimonialSlider = new Swiper('.testimonial-slider-three', {
slidesPerView: 1,
slidesPerGroup: 1,
loop: true,
/*autoplay: true,*/
autoplay: {
delay: 6000,
disableOnInteraction: false,
},
speed: 1000,
autoHeight: true,
spaceBetween: 30,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination-t0',
type: 'bullets',
clickable: true
},
I am currently using owl carousel to make a slide with pictures.
But the problem now is, I wanna make the navigation on both side (not on top of the slide).
Below is my script:
$('.teamc').owlCarousel({
items: 4,
margin: 20,
autoHeight : true,
autoWidth: true,
center: true,
nav: true,
loop: true,
autoplay:true,
navText: ['<div class="customNextBtn" style="float:left; margin-left:33px"></div>', '<div class="customPreviousBtn" style="float:right; margin-right:33px"></div>'],
responsiveClass: true,
responsive: {
0: {
center: true,
items: 1,
margin: 20,
autoHeight : true,
autoWidth: true,
nav: false,
loop: true
},
600: {
center: true,
items: 4,
margin: 20,
autoHeight : true,
autoWidth: true,
nav: false,
loop: true
},
1000: {
center: true,
items: 4,
margin: 20,
autoHeight : true,
autoWidth: true,
nav: true,
loop: true
}
}});
Here is the sample picture of what I want it to be:
if you have this:
<div class="main-content">
<div class="owl-carousel owl-theme">
<div class="item">...</div>
<div class="item">...</div>
...
</div>
<div class="owl-theme">
<div class="owl-controls">
<div class="custom-nav owl-nav"></div>
</div>
</div>
you should add below code in js :
$('.main-content .owl-carousel').owlCarousel({
.... ,
navContainer: '.main-content .custom-nav',
....
});
I need slider on web-page and i get slick-slider. I wanted use slider center-mode but a little change this slider. I would that central element of that slider had bigger size than other elements of the slider.
But i can't to detetmine what class use central element, i try applied class "slick-center", "slick-current" but this attempts don't work.
This is my problem
$('.slidy').slick({
centerMode: true,
centerPadding: '10px',
slidesToShow: 3,
responsive: [
{
breakpoint: 768,
settings: {
arrows: true,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}}
]
});
$(document).ready(
function() {
var next = document.querySelector('.slick-next');
next.onclick = function() {
document.querySelector('.slick-center').style.border ="2px solid red";
document.querySelector('.slick-center').style.transform="scale(1.2, 1.2)"
}
}
)
.slick-prev:after {
content: ">";
color: red;
font-size: 30px;
}
.slick-next:before {
content: "<";
color: red;
font-size: 30px;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.slick/1.3.7/slick.min.js"></script>
<script src="http://cdn.foundation5.zurb.com/foundation.js"></script>
<div class="slidy">
<div> peace of one </div>
<div> peace of two </div>
<div> peace of tree </div>
<div> peace of four </div>
<div> peace of five </div>
<div> peace of six </div>
</div>
If you advise how write sliders by himself it will be cool)
$('.slidy').slick({
slidesToShow: 1,
centerMode: true,
centerPadding: "35px",
speed: 500
});
Your can add padding with centerPadding : ""; option also
you can apply your own CSS for center one this way:
.slidy .slick-center{}
I am trying to do a function after my first slide has shown. I basically want to do the same function after each slide, but my 2nd slide is just still. Nothing is fading in or coming in.
Here is my JQuery
$("#slideshow").cycle({
fx: 'scrollHorz',
pager: '#slideshow-nav',
speed: 600,
timeout: 7000,
pauseOnPagerHover: true,
containerResize: false,
slideResize: false,
fit: 1,
before: beforeSlide,
after: afterSlide
});
function beforeSlide() {
$("#slideText").css('padding-left', '0px');
$("#slideText").css('opacity', '0');
}
function afterSlide() {
$("#slideText").animate({ opacity: 1, paddingLeft: '+=100px'}, 600);
}
Here is my html
<div id="slideshow" class="slides">
<div class="slide" style="background-image: url('slideOne.jpg'); background-color: #e3d7bd;">
<div id="slideText">
<h1>asdf</h1>
<br />
<p>asdf</p>
<p>asdf</p><br />
Get started today
</div>
</div>
<div class="slide" style="background-color: #fff;">
<img class="slideTwoImage" src="slideTwoKid.png"></img>
<div id="slideText">
<h1>Test.</h1>
<br />
<p>asdf</p>
<p>asdf</p><br />
Get started today
</div>
</div>
<!-- <div class="slide" style="background-image: url('slideTwo.jpg'); background-color: #fff; display: none;"></div>
<div class="slide" style="background-image: url('slideThree.jpg'); background-color: #000; display: none;"></div> -->
</div>
It works for the first slide..the animation for the text, but on the 2nd slide it is not working.
Change containerResize: false to containerResize: true then it should work.
See demo here
I figured it out. You have to name elements in the before and after function differently.
I had them both named #slideText as you can tell in the functions. Just name them separate.
$("#slideshow").cycle({
fx: 'scrollHorz',
pager: '#slideshow-nav',
speed: 600,
timeout: 7000,
pauseOnPagerHover: true,
containerResize: true,
slideResize: false,
fit: 1,
before: beforeSlide,
after: afterSlide
});
function beforeSlide() {
$("#slideText").css('padding-left', '0px');
$("#slideText").css('opacity', '0');
$("#slideTextTwo").css('padding-left', '0px');
$("#slideTextTwo").css('opacity', '0');
}
function afterSlide() {
$("#slideText").animate({ opacity: 1, paddingLeft: '+=100px'}, 600);
$("#slideTextTwo").animate({ opacity: 1, paddingLeft: '+=100px'}, 600);
}
So now I can make changes on separate slides the way I intended.