Creating Hero Slider

[Nic727]

Hi,

I would like to create a slider on my homepage and I was reading about how to make one via Google, but there is so many different way that I'm a bit lost. I found pure CSS way to do a slideshow, but I'm not sure it's legit for modern standard. Do you know a Javascript or JQuery way to do a slider?

 

I just want a minimalist code that work and not a code taking 50 lines.

 

Is it better to use background-image for the slider or img inside a list? I could use background-image to prevent people from saving my slider image, but I would need multiple class like .img1, .img2 , etc. Since I'm currently coding my website by hand and will use pinegrow in the future to convert into a WordPress theme, what would be better? Using an existing plugin (that I will need to fixe myself with my own css rules later) or creating my own slider with minimal code? I'm looking a way to be able to easily remove/add new image to the slider, so is it possible to automatically add a class and a background-image or it's better to automatically add/remove an img?

I know that Revolution Slider use background-image inline styles, so maybe another way?

 

Thank you

Edited April 26, 2018 by Nic727

[justsomeguy]

By a slider, do you mean a control like a volume slider to set the audio volume?

I could use background-image to prevent people from saving my slider image

That won't prevent anything, you can't prevent people from downloading things that you put on the internet for people to download.

It sounds like you've found a lot of things that you don't want to do, but I don't know why.  Why don't you want to use CSS only?  Why is the number of lines of code significant?  Why don't you want to use the same method that another slider uses?

[Nic727]

3 hours ago, justsomeguy said:

By a slider, do you mean a control like a volume slider to set the audio volume?

 

 

That won't prevent anything, you can't prevent people from downloading things that you put on the internet for people to download.

It sounds like you've found a lot of things that you don't want to do, but I don't know why.  Why don't you want to use CSS only?  Why is the number of lines of code significant?  Why don't you want to use the same method that another slider uses?

No just a slider with images with fade-in/out effect for my homepage. I know that people can just go into the code to find my images. What I mean is that it is awkward to see a "save image" when it changing every 5 seconds.

I found this great pure css slideshow http://urbaninfluence.com/2015/05/make-a-background-image-slider-with-css-keyframes/

It does look good enough, but not sure about the use of keyframe, because it will be complicated to automate that if I add/remove an image in my future WordPress website. Plugins are just adding too much code and I want a clean and fast website. I just hate to see divs inside divs inside divs when you can only get one div doing everything.

I was trying to find a single small code that will just do what I want to do... change <li> each 5 seconds with a fade effect and make a loop.

I found this https://owlcarousel2.github.io/OwlCarousel2/

It looks good, but it came with so many things that I will not really use that I don't know if I should download that. Here is my code for now:

<div class="hero-slider">

      <ul class="slider-image">

           <li style="background-image: url(images/background1.jpg)"></li>

           <li style="background-image: url(images/background2.jpg)"></li>

      </ul>

</div>

I know that with some help when I will convert into WordPress it will be easy to just add a <li> with background-image.

 

Should I take Owlcarousel? Do you know something else? Should I do my custom code with your help?

 

Thank you

Edited April 27, 2018 by Nic727

[justsomeguy]

Plugins are just adding too much code and I want a clean and fast website.

Frankly, WordPress isn't the best choice for that.  WordPress is great for making modular sites when you don't need to know a lot about the underlying technology.  That same premise means that you have a ton of files to download because everything is contained in an individual theme or plugin or whatever.  I've seen WordPress sites where a single page requires several hundred requests to the server, which is the major influencer of speed.  Each plugin and theme might have 10 stylesheets to download just for that one thing because the major design goal was making everything modular and separate.  If you want a single stylesheet and a single Javascript file to be needed for the whole site that's pretty difficult to do with WordPress.  WordPress is good for a lot of things, but in terms of the code and resources needed for the site, I would say it's neither clean nor fast.

It looks good, but it came with so many things that I will not really use that I don't know if I should download that.

That one will at least compile down to a single stylesheet, and a single Javascript file, although it requires jQuery.  But, if you're going to use something like jQuery, that's about as good as you can get.

If you want to do it yourself, it's probably not all that hard, although a benefit of those other plugins is that they often take care of things like responsive displays and touch events and things like that, if you care about those things.  If all you want is an image gallery to constantly fade between images without any interaction like pausing or resuming, that's fairly easy.  If you're using jQuery already on your page, you can get a collection of all of the li elements, you can use a class to determine which is the active one (so you can get the current one), and you can use things like nextSibling to get the next image or, if there isn't a next sibling, go back to the start.  You can use CSS to position all of the elements in the same place, and jQuery will handle the fade animations (or you can use CSS transitions for that).  Doing that will let you just add more li elements and you don't need to change the rest of the code, but it's not going to have some of the more advanced features that the plugins do.

It's really just about balance, you need to find the right balance that works for you.

[Nic727]

ok lol. I tried to use OwlCarousel which looked very easy to use since they say to only add owl-carousel class to your div (or ul) and it will make a rotation of you div inside (or li), but for me it wasn't working I don't know why.

 

My HTML was:

<div class="hero-slider"> 
  <ul class="slider-image owl-carousel"> 
    <li style="background-image: url(images/background1.jpg)"></li> 
    <li style="background-image: url(images/background2.jpg)"></li> 
  </ul> 
</div>

And JS from owl-carousel:

$(document).ready(function(){
    $(".owl-carousel").owlCarousel({
        number:1,
        loop:true,
        mouseDrag:false,
        touchDrag:false,
        pullDrag:false,
        freeDrag:false,
        dots:false,
        autoplay:true,
        autoplaySpeed:5000,
        autoplayTimeout:5000,
        slideTransition: 'ease-in-out',
        animateOut: 'fadeOut',
        animateIn: 'fadeIn'
    });
  });

For unknown reason it was just spawning lot of divs and was breaking my code:

 

_____

So while waiting for an answer how to fixe that from GitHub, I found this 

Very easy and it works like a charm.

<div class="hero-slider">
            <ul class="slider-image">
                <li class="hero-image active" style="background-image: url(images/background1.jpg)"></li>
                <li class="hero-image" style="background-image: url(images/background2.jpg)"></li>
            </ul>
        </div>

$(document).ready(function(){
    function play() {
        setInterval(function(){
            var next = $(".slider-image .active").removeClass("active").next(".hero-image");
            if (!next.length) {
                next = $(".slider-image .hero-image:first");
            }
            next.addClass("active");
        }, 8000);
    }
    play();
  });

Here is my CSS.

.hero-slider {
    width: 100%;
    height: 100%;;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 1;
    display: block;
    overflow:hidden;
    background-color:black;
}
.slider-image{
    list-style: none;
    width: 100%;
    height:100%;
    padding:0;
    margin:0;
}
.slider-image li{
    position:absolute;
    background-position:center center;
    background-size:cover;
    width: 100%;
    height:100%;
    opacity:0;
    transition:opacity 3s ease-in-out;
}
.slider-image li.active{
    opacity:1;
  animation: fadeIn 3s;
}

I added a fadeIn animation (with animate.css) to have a fadeIn when page load instead of a popping image. Not sure it makes the animation each time the active class appear (change item). What do you think? I tried to add it to my ul (slider-image), but doesn't work here and in hero-slider it works 50% and make the image pop very fast at the end.

The only problem is the active class that I have to add manually. Do you know a way to add the active class when the page load? I tried by removing it, but it wait 8s (8000) before first image appearing. Would be easier when converting to Wordpress to have the class added automatically to the first item in the list.

Edited May 4, 2018 by Nic727

[justsomeguy]

Do you know a way to add the active class when the page load?

If you don't want to just add that class to the HTML for some reason, I guess the obvious answers are either PHP or Javascript.  If you're building that HTML with PHP, then that sounds like the way to go.  If you're not, then you can add some Javascript to find the element you're looking for and add a class to it.