We Keep Coding

SplideJS full-width images slider not autoplaying

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();

How can I get my SlickJS Carousal to cycle between 3 images and have them all visible while cycling?

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%;
}

Change width of slide in Slick-Slider

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.

Jquery's Resizable Div's Width and Height turns to 0 when resize

I have this code:
<table>
<tr>
<td id="parent">
<div id="child"></div>
</td>
</tr>
</table>
My JavaScript code:
$('#child' ).resizable({
animate: true,
helper: '.ui-resizable-helper',
maxWidth: 500,
maxHeight: 500,
aspectRatio: true
});
With the above code, My resizable div works as expected but when I add containment option, the divs width and height is resize to 0, when resize in whatever direction.
$('#child' ).resizable({
animate: true,
helper: '.ui-resizable-helper',
maxWidth: 500,
maxHeight: 500,
aspectRatio: true,
containment: '#parent'
});
Why is it happening? Is it a bug?

Try to add this CSS:
#parent {
width: 500px;
height: 500px;
}

The issue isn't with the #parent it's with the #child. Apply the following CSS so that it has a base start size.
#child {
height:200px;
width:200px;
}
Also you can see my fiddle here to illustrate the change using your code.

<table>
<tr>
<td>
<div class="child" style="border:solid 1px red;">
</div>
</td>
<td>
<div class="child" style="border:solid 1px red;">
<p>this is a test
</p>
</div>
</td>
</tr>
</table>
Define a minimum width and height for the child
.child {
min-width:50px;
min-height:50px;
}
Set containment to document and add the default minHeight, minWidth values.
var defaultHeight = $('#child').height();
var defaultWidth = $('#child').width();
$('.child').resizable({
animate: true,
helper: '.ui-resizable-helper',
minHeight:defaultHeight,
minWidth:defaultWidth,
maxWidth: 500,
maxHeight: 500,
aspectRatio: true,
containment: 'document'
});
fiddle

jQuery vTicker with vertical scroll bar

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'
});
});