Develop Reference

Make Slider autoscroll images automatically with js or css or both

I am using the Slider from Ratchet css, which as far as I know does nothing as far as auto scrolling goes.
Here is the code:
<div class="slider" id="mySlider">
<div class="slide-group">
<div class="slide">
<img src="/assets/img/slide-1.jpg">
<span class="slide-text">
<span class="icon icon-left-nav"></span>
Slide me
</span>
</div>
<div class="slide">
<img src="/assets/img/slide-2.jpg">
</div>
<div class="slide">
<img src="/assets/img/slide-3.jpg">
</div>
</div>
</div>
What I need to do is either with js or css or both have the images scrolling every few seconds.
How can I do this?

Looking into the sliders.js it is based off
https://github.com/thebird/Swipe
So a function like this could work, it might need some tweaking.
window.mySwipe = new Swipe(document.getElementById('slider'), {
startSlide: 2,
speed: 400,
auto: 3000,
continuous: true,
disableScroll: false,
stopPropagation: false,
callback: function(index, elem) {},
transitionEnd: function(index, elem) {}
});

How to delete slick slider when on mobile

I am using slick.js on my website to show testimonials on my homepage.
When the user is on a mobile device, I want to copmpletely remove the testimonial part. This has the requirement that the images in the slick should not have been loaded already!
This is my code to build the slick :
<div class="quote-carousel">
<div class="quote-wrapper">
<?php if(isset($data['carousel_title'])){ ?>
<h3 class="text-center m-b-2"><?php echo $data['carousel_title'];?></h3>
<?php } ?>
<div class="slick-wrapper">
<div id="slick-single" data-slick='{"autoplaySpeed": 6000}' >
<?php foreach ($testimonial_items as $item) { ?>
<div class="quote-item">
<div class="container">
<div class="row">
<div class="col-md-4 person text-center">
<?php if(isset($item->user_id)){ ?>
<img
alt="Testimonial <?=$item->name?>"
src="<?=base_url()?>design/img/testimonials/<?=$item->image?>"
/>
<p class="name"><?=$item->name?></p>
<p class="function"><?=$item->function?><?php if(isset($item->name_partner)){?> &commat; <span class="entity"><?=$item->name_partner?></span><?php } ?></p>
</div>
<div class="col-md-8 align-self-center">
<blockquote class="font-medium-3"><span><?=$item->message?></span></blockquote>
</div>
</div>
</div>
</div>
<?php } ?>
</div>
</div>
</div>
</div>
And javascript looks like this:
var slickSingle = $('#slick-single');
slickSingle.slick({
dots: true,
lazyLoad: 'ondemand',
infinite: true,
speed: 300,
autoplay: true,
responsive: [
{
breakpoint: 768,
settings: {
arrows: true,
slidesToShow: 1
}
},
{
breakpoint: 480,
settings: {
arrows: false,
slidesToShow: 1
}
}
]
});
1) I have tried playing around with changing the img tags to div's and setting the image as a background-image via CSS, combined with the styles that slick add's to the img tag, as an inline style element to the div. However this did not work since Slick adds too many stuff all over the place. (plus: this is also not SEO friendly).
2) Another option i've been playing with is changing the element to a element like so:
<picture>
<source srcset="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" media="(max-width: 768px)">
<img
alt="Testimonial <?=$item->name?>"
src="<?=base_url()?>design/img/testimonials/<?=$item->image?>"
/>
</picture>
However, it is still not ideal since it will still download the 1x1 to the browser. (But at least it's better I think?)
3) The third option I see is to use AJAX and create the complete slider in javascript. However I think this is quite complex and i'm not sure whether it will be worse for desktop users (performance wise) ?

fullpagejs and AOS - not working together

I'm using fullpagejs and AOS to make some divs popping up from the bottom of the page on scroll (or at least that's what I'd like to achieve).
Unfortunately, it is not working.
Yes, I've read the FAQ sections of fullpage and yes, scrollbar is set to true and autoscroll is set to false.
My setup is the following:
<div class="section" id="test">
<div class="slide">
<div class="section">
{someOtherContent}
<!-- div i want to animate is down below -->
<div data-aos="slide-up">test</div>
</div>
</div>
<div class="slide"></div>
<div class="slide"></div>
</div>
$('#test').fullpage({
lazyLoading: false,
lockAnchors: true,
scrollingSpeed: 300,
fitToSection: false,
easing: 'easeInOutCubic',
easingcss3: 'ease',
loopHorizontal: false,
offsetSections: false,
resetSliders: false,
scrollOverflow: true,
scrollOverflowReset: true,
touchSensitivity: 0,
bigSectionsDestination: top,
keyboardScrolling: false,
animateAnchor: false,
recordHistory: true,
controlArrows: false,
verticalCentered: true,
responsiveWidth: 0,
responsiveHeight: 0,
sectionSelector: '.section',
slideSelector: '.slide',
scrollBar:true
//events
afterLoad: function (anchor, index( {
initArrowEventListener()
}
the afterLoad event function simply initialises my menu links (based on the slide index) and the only relevant part is that I initialise AOS when I click on one specific link (as I want the library to work only on a specific page and not everywhere.
So, I load the page, click to navigate on the slider page I want, the function is called (console log proofs it, as well as AOS classes are applied to the relevant div), I can see the scrollbar, but nothing, the div is not popping up from the bottom.
Any idea what am I doing wrong here?
There used to be this pen illustrating the same problem. Click on "About" (the function that initialises AOS is called as the one for the title works as well), scroll to the bottom and you will see a lot of white space. If you inspect the console, AOS is initialised on the element (its classes are applied) but the element never slides up)

Use only the css part of AOS and hook up aos-animate on fullpage.js callbacks.
Add the AOS body data manually
<body data-aos-easing="ease" data-aos-duration="1000" data-aos-delay="0">
Add the aos-init class
$('[data-aos]').each(function(){ $(this).addClass("aos-init"); });
Toggle the aos-animate class with fullpage.js callbacks
$('#fullpage').fullpage({
slidesNavigation: true,
controlArrows: false,
onLeave: function(){
$('.section [data-aos]').each(function(){
$(this).removeClass("aos-animate")
});
},
onSlideLeave: function(){
$('.slide [data-aos]').each(function(){
$(this).removeClass("aos-animate")
});
},
afterSlideLoad: function(){
$('.slide.active [data-aos]').each(function(){
$(this).addClass("aos-animate")
});
},
afterLoad: function(){
$('.section.active [data-aos]').each(function(){
$(this).addClass("aos-animate")
});
}});
Example HTML
<div id="fullpage">
<div class="section" id="section0">
<div class="intro">
<div data-aos="fade-up">
<h1>fade me up!</h1>
</div>
</div>
</div>
<div class="section" id="section1">
<div class="slide">
<div class="intro">
<div data-aos="zoom-in">
<h1>zoom me in!</h1>
</div>
</div>
</div>
<div class="slide">
<div class="intro">
<div data-aos="flip-down">
<h1>flip me down!</h1>
</div>
</div>
</div>
</div>

Flexslider carousel custom nav - multiple on same page

I'm using flexslider for some carousels, everything works fine. Due to where I need to position the navigation for the carousel, I decided specifying custom navigation would be the best approach. Again, this works fine. This is the code I'm using:
$(window).load(function() {
$('.carousel').flexslider({
animation: "slide",
customDirectionNav: $(".nav-carousel a"),
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 220,
itemMargin: 10,
minItems: 1,
maxItems: 5
});
});
The HTML (just with 1 item for demonstration purposes):
<div class="box">
<header class="header">
<h2>Similar products</h2>
<p>other customers have purchased</p>
<div class="nav-carousel">
<span>Prev</span>
<span>Next</span>
</div>
</header>
<div class="carousel">
<ul class="products slides">
<li class="h-product">
<a href="#" title="TITLE TEXT" class="inner">
<img src="img/temp/products/thumbs/1.jpg" alt="ALT TEXT" class="u-photo" />
<h2 class="p-name">Product title</h2>
<p class="e-description">Product description</p>
<data class="p-rating" value="4">Rating: 4 out of 5</data>
<p class="value"><del>£7.99</del> <data class="p-price" value="6.95">£6.95</data></p>
</a>
</li>
</ul>
</div>
</div>
The issue occurs where I have multiple carousels on the same page. I can see the script is just looking for a div with a class of .nav-carousel, obviously if there is more than 1 it's getting confused and breaking.
I don't want to duplicate the script for a .carousel-2 or even .carousel-3. Although I can't imagine there ever being more than that I'd prefer it to be 'scalable' just incase.
I imagine I'd need to use/specify a parent div then make sure that the .nav-carousel that's targeted is descendant of that div so it only effects the relative child carousel? I tried this with the code I've included in the post but without joy.
Moving the <header> within the .carousel div doesn't seem to break anything in terms of the carousel layout/movement but that alone doesn't fix the navigation.
Hope someone can help with this.

I can't take credit for this, Shikkediel over at css-tricks pointed out the error of my ways. Using a loop worked, here's a working multi-carousel CodePen example:
http://codepen.io/anon/pen/xZGzzN?editors=001
Here's the script:
$(window).on('load', function() {
$('.carousel').each(function() {
$(this).flexslider({
animation: 'slide',
customDirectionNav: $(this).find('.nav-carousel a'),
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 250,
itemMargin: 0,
minItems: 1,
maxItems: 5
});
});
});
For this to work, the navigation .nav-carousel, has to be within the .carousel container.
Hope this is useful for someone else!

Click on thumb shows large image

I have a carousel slider,
when I click on a thumb an image needs to be loaded in the large banner.
How can I do this?
It needs to be smooth, it shows a large image, when clicking on a thumb that thumb needs to fade-in over the existing image. But first I need to get it working thow.
Example here
New other example is here!
<div class="big">
<img src="http://placehold.it/476x300&text=first" />
<img src="http://placehold.it/476x300&text=sec" />
<img src="http://placehold.it/476x300&text=third" />
<img src="http://placehold.it/476x300&text=four" />
<img src="http://placehold.it/476x300&text=five" />
</div>
<div class="owl-carousel small">
<div class="item">
<img src="http://placehold.it/238x150&text=first" />
</div>
<div class="item">
<img src="http://placehold.it/238x150&text=sec" />
</div>
<div class="item">
<img src="http://placehold.it/238x150&text=third" />
</div>
<div class="item">
<img src="http://placehold.it/238x150&text=four" />
</div>
<div class="item">
<img src="http://placehold.it/238x150&text=five" />
</div>
</div>
script:
$(document).ready(function() {
$('.owl-carousel').owlCarousel({
loop: true,
margin: 10,
responsiveClass: true,
responsive: {
0: {
items: 2,
nav: false
},
600: {
items: 3,
nav: false
},
1000: {
items: 4,
nav: false,
loop: false,
margin: 20
}
}
})
})

You need to attach an event handler to each image,
I see you are loading jQuery which makes this nice and easy
$(function(){
$(".big img:eq(0)").nextAll().hide();
$(".es-slides .es-slide-inner img").click(function(e){
var index = $(this).index();
$(".big img").eq(index).show().siblings().hide();
});
$('#basic_slider img').each(function(i,image){
$(image).on('click', function(){
$('.big').html('<img src=\''+ image.src + '\'/>');
});
});
});
We are using the jQuery each method to loop through each image in the carousel, then update the html inside the with an image tag that has the correct src for the image.
Alternatively you could show/hide the images in the .big container like your html already shows. This will probably work better for fading the images in and out as you wish.
Fiddle