I'm using Splide as a full-width slider on a page with images taken from a loop of my database:
<div class="splide b-bottom-accent is-hidden-mobile">
<div class="splide__track">
<ul class="splide__list">
#foreach($slider_images as $image)
<div class="splide__slide"><img src="{{ asset('storage/'.$image->path) }}"></div>
#endforeach
</ul>
</div>
</div>
my javascript to trigger the slider:
new Splide( '.splide', {
type : 'fade',
perPage: 1,
gap: 0,
padding: 0,
rewind: false,
width : '100vw',
height: 390,
cover: true,
} ).mount();
The cover option makes it so the images become background of the div and can be cover, the perPage, gap and padding options are there to make the fade work.
The documentation doesn't say how to activate autoplay, I think it implies is automatically activated, instead, it says how to add a progressbar only :
You can add a progress bar or play/pause buttons for autoplay by writing a few extra lines of HTML.
Am I missing something? Everything works, the slider shows, the images show, the fade happens when clicking the arrows, I have no errors in my console. Any idea?
You just need to add autoplay: true, and an interval is also configurable (ms). I found setting the type to fade it was best to have rewind set to true too.
new Splide( '.splide', {
type : 'fade',
perPage: 1,
gap: 0,
padding: 0,
rewind: false,
width : '100vw',
height: 390,
cover: true,
autoplay: true,
interval: 4000
} ).mount();
Related
Using Slick Slider I'm trying to create a carousel that on the first slide it will show 75% of the slide and when scrolling it should only show 75% of the next slide.
First slide only showing 75% and then 25% of next slide
What is happening: Shows 75% of next slide but does not show 25% of previous slide
What I am trying to accomplish: Show 25% of the previous slide and 75% of current slide
My current Slick Config is:
$('.myCarousel').slick({
arrows: false,
infinite: false,
slidesToShow: 0.75,
slidesToScroll: 1,
variableWidth: true
})
I've tried changing the slidesToScroll property to 0.75 with zero success. It seems that anything less than 1 and Slick Slider refuses to change slides.
I've also found that I can have my slider element, in this example .myCarousel, watch for the swipe event. I've thought about attempting to change the transform: translation(#px, #px, #px) on the carousel container, .myCarousel, with JS but I feel there must be an easier way.
Carousel HTML
<div class="gateway_nav">
<div class="border_right__red">
<div>
ASD
</div>
<div class="gateway_nav__slider_element">
ASDFG
</div>
<div class="gateway_nav__slider_element">
ASDFGH
</div>
<div class="gateway_nav__slider_element">
ASDFGHJKL
</div>
</div>
<div>
<div>
QWERT
</div>
<div class="gateway_nav__slider_element">
QWERT
</div>
<div class="gateway_nav__slider_element">
QWERTY
</div>
<div class="gateway_nav__slider_element">
QWER
</div>
</div>
</div>
What you can do is play with the center padding:
$('.gateway_nav').slick({
arrows: true,
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
variableWidth: true,
centerMode: true,
centerPadding: '20%',
})
https://jsfiddle.net/10ftk4w2/
I don't have your CSS so I'm guessing here.
I am using SlickJS to build a slider that will allow me to cycle between images.
Similar to this image
Link to SlickJS Documentation
There area a couple of problems that I am running into.
The first is that, as far as I know, you cannot cycle between images if you are showing them all at once. For example if you set slidesToShow to 3 and you have only 3 images, you cannot cycle through them.
The other problem I have is that even when assigning custom buttons and running the slickNext and slickPrev functions through them, it still does not cycle.
Could anyone provide me guidance on how to get the slider to function similar to the image I provided above?
Here is the code I have:
<div>
<button class="left-selector" style="height: 20px; width: 20px">
</button>
<div class="center-ag-slider">
<div>
<img style="max-width:100%; max-height:100%;" src="https://keystonepuppies.com/wp-content/uploads/2012/11/Siberian-Husky-Category-950x700.jpg">
</div>
<div>
<img style="max-width:100%; max-height:100%;" src="https://dgicdplf3pvka.cloudfront.net/2355971/siberian-husky-puppy-picture-473f7308-f278-4858-b1ec-81368845e1be.jpg">
</div>
<div>
<img style="max-width:100%; max-height:100%;" src="https://i.ebayimg.com/00/s/NzUzWDEwMjQ=/z/bCwAAOSwTM5YtzZy/%24_86.JPG">
</div>
</div>
<button class="right-selector" style="height: 20px; width: 20px">
</button>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('.center-ag-slider').slick({
centerMode: true,
centerPadding: '60px',
slidesToShow: 3,
initialSlide: 0,
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
]
});
$('.left-selector').click(function () {
$(".center-ag-slider").slick("slickPrev");
});
$('.right-selector').click(function () {
$(".center-ag-slider").slick("slickNext");
});
});
</script>
You can set a width on the slick-slide class in css that will display them all on the page simultaneously. So, in this case because there are 3 images you are trying to slide through you would set the width on slick-slide to be 33.333333%;
.slick-slide {
width: 33.333333%;
}
I am using slick-slider
in my Angular-6 project using jQuery. I want to change the width of the slide on click of that slide.
Here is my HTML:
<div class="slide-container">
<div class="slide" (click)="changeWidth()"></div>
<div class="slide" (click)="changeWidth()"></div>
<div class="slide" (click)="changeWidth()"></div>
<div class="slide" (click)="changeWidth()"></div>
<div class="slide" (click)="changeWidth()"></div>
</div>
Here is my typescript code:
ngAfterViewInit() {
$('.slide-container').slick({
centerMode: true,
centerPadding: '25%',
slidesToShow: 1,
accessibility: true,
cssEase: 'ease-in-out',
focusOnSelect: true,
infinite: false,
speed: 350,
});
}
changeWidth() {
// currentWidth is a global variable assigned to '25%'
if (currentWidth === '25%') {
$('.slide-container').slick('slickSetOption', 'centerPadding', '2%');
} else {
$('.slide-container').slick('slickSetOption', 'centerPadding', '25%');
}
}
Here is my CSS:
.slide {
transition: width 0.35s ease-in-out;
}
It works pretty well but the problem is when it increases the width slides move towards left first and then start its CSS transition. Also, when it decreases the width it moves slides towards the right and then starts the CSS transition.
At the time of increasing width, I want it to increase the width from the center of the slide and at the time of decreasing it should end up decreasing in center of slide only.
It is also okay to change CSS properties of Slick-classes. I tried to change according to my need but it is not working as my expectation.
How can I accomplish this scenario?
Thanks.
i am using this slider - > http://writerservices.us/slidy/ for your information.
I need to make slider width 100%, so in every resolution it stays 100%.
<script type="text/javascript">
$(function() {
$('#default').slidy();
$('#pause').slidy({
animation: 'mouseenter',
cursor: 'wait',
pause: true
});
$('#menu').slidy({
animation: 'slide',
children: 'a',
menu: true,
pause: true,
speed: 1100,
time: 400001111111111111,
width: 1300,
height: 400
});
$('.group').slidy({
animation: 'slide',
height: 97,
width: 240
});
});
</script>
This is the html js code, there is variable width, bet when i write width: "100%" it doesn`t do what i want.
and html slider code looks like that
<div id="menu">
<img src="img/image-2.jpg" title="Cargo handling"/>
<img src="img/image-3.jpg" title="Cargo charter flights"/>
</div>
try this fiddle
$('#menu').slidy({
animation: 'slide',
children: 'a',
menu: true,
pause: true,
speed: 1100,
time: 400001111111111111,
width: $(document).width(),
height: $(document).height()
});
According to slidy's own documentation, the "width" option is to always be provided in pixels and never percentages (https://github.com/wbotelhos/slidy).
I would recommend using a different slider that supports percentage widths.
Use width:"100% !important"
<div id="default" style="width:100% !important;">
<img src="img/image-1.jpg" style="width:100% !important;"/>
<img src="img/image-2.jpg" style="width:100% !important;"/>
<img src="img/image-3.jpg" style="width:100% !important;"/>
</div
I am using jQuery vTicker, But I want the whole list which user can view using the scrollbar. I don't want dynamic scroll bar. Just a simple scroll bar.
This is what I am doing.
HTML:
<div id="liveData" style="max-height: 490px; overflow: auto;">
<div class="live-feeds">
<ul>
<li>
/*Live data here*/
</li>
</ul>
</div>
</div>
JS:
$('.live-feeds').vTicker({
speed: 800,
pause: 2000,
animation: 'fade',
height: 490,
mousePause: true,
showItems: 50
});
Does anyone have any idea how do I do this.
add
direction:'down'
to your (.live-feeds).vTicker JS
your js should really be
$(function() {$('#live-feeds').vTicker({
speed: 800,
pause: 2000,
showItems: 50,
animation:'fade',
mousePause:true,
height: 490,
direction:'down'
});
});