hero slider
April 21, 2015 | 230 Feedbacks

Hero Slider

A full-width, responsive and easy to customize slideshow.
Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera
9+

It is a common approach to fill in the intro section of a website with a slideshow: you’re trying to show the users as much as you can above the fold, yet you want to deliver this information in an organized and clean way.  Therefore we built for you a ready-to-use jQuery slider, with some built in options like video/image backgrounds and different text alignments. In an attempt to increase user engagement, we replaced the “navigation arrows” with buttons. The difference is: buttons have a title, a hint about what kind of content to expect. Arrows just tell users “you can switch slide”.

Assets:

Creating the structure

The HTML is structured in 2 main elements: an unordered list (ul.cd-hero-slider) containing the slides, and a div.cd-slider-nav, containing the slider navigation and the span.cd-marker (used to create the marker for the selected item in the navigation).

Adding style

The slider structure is pretty straightforward: all the slides are translated to the right, outside the viewport (translateX(100%)); the .selected class is added to the visible slide to move it back into the viewport (translateX(0)), while the .move-left class is used to translate a slide to the left (translateX(-100%)).

To achieve the smooth animation, we used CSS3 Transitions applied to the .selected and the .is-moving elements: when a new slide is selected, the .is-moving class is assigned to the slide moving outside the viewport, while the .selected class is assigned to the selected slide.

About the single slide animation: on big devices (viewport width more than 768px), we decided to spice up the entrance effect animating the single slide elements (.cd-half-width and .cd-full-width), changing their opacity and transform properties.

The .from-left and .from-right classes are used to detect if the .selected slide is entering the viewport from the left or from the right, in order to trigger a different animation according to the entrance direction. For this effect to properly work, we used a different animation-delay value for each animated element.

For the .cd-half-width elements, for example:

Events handling

The video used as background for one of the slides is not inserted directly into the HTML but loaded only if the device width is bigger than 768px; this way the video won’t be loaded on mobile devices. The data-video of the selected slide is used to retrieve the video url. You may consider doing the same for the <img> elements inside the .cd-img-container (which is hidden on mobile devices).

Besides, we used jQuery to implement the slideshow functionality: when user clicks one of the list items of the .cd-slider-nav tab, we detect the position of the selected item  (using the index() function) and update the slider (using the nextSlide() or prevSlide() functions according to this position) and the span.cd-marker position.

Note: if you want to animate the slider automatically, add the .autoplay class to the ul.cd-hero-slider element.

Changelog

May 28, 2015
  • Autoplay implemented
Apr 30, 2015
  • Bug fixed - if the first visible slide has a background video, autoplay it
Apr 21, 2015
  • Resource released by CodyHouse

Claudia Romano

Web developer, fan of The Big Bang Theory and good food. Co-founder of CodyHouse and Nucleo. You can follow her on Twitter.

  • http://merqur.io/ Merqurio

    Nice one!

  • http://lukespoor.me Luke Spoor

    Excellent! Been after something like this for a while! How hard would it be to layer/order the text to come in after the images have entered?

  • http://renestalder.me/ René Stalder

    Why using jQuery for this one? I’m more interested in non-jquery solutions since there are enought jQuery libraries and plugins out there.

    • Gijs van Dam

      Although I like the particular implementation of this slider, I also agree with @nachtmeister:disqus that this is done a few times before. FractionSlider for instance.

  • Александр

    Очень красиво! Большое спасибо за вашу работу!

  • Efren Castillo

    Great!

  • Sam

    Fabulous!

  • http://www.devaprise.com/ TheVirusKA

    This is cool!

  • Chathuranga Pradeep Cpm

    awesome :)

  • Yaswanth Yashu

    beautiful, looks amazing

  • Henning Fischer

    firefox 37.0.2 windows 8.1 the menu is buggy.
    screenshot: http://fs1.directupload.net/images/150422/6h8tp6zh.png

    • http://codyhouse.co Claudia Romano

      Hi Henning,
      I just checked it on Firefox 37.0.2 (on windows) and it’s working fine! (not sure if you saw a cached version) anyway are you still experiencing this issue? thanks

  • Dennis Hüttner

    Nice one! Actually interesting for a project in TYPO3 for me

  • Chris Tate

    How about the complete html/css styling? You didn’t include css for the menu, it’s structure, etc :/

    • Chris Tate

      And the code for updateNavigationMarker? I appreciate you putting this together but it’d be nice if it were the complete product.

      • http://www.bluekeyinteractive.com/ Mihai Slujitoru

        You can download the package.

        • Chris Tate

          Yeah, didn’t see that at first. I’m not ungrateful, just wish the tut covered the complete package.

          • http://codyhouse.co/ Sebastiano Guerriero

            Hi Chris, we try not to include the whole code, but rather focus on the most important details. This way we can explain thoroughly the tricky parts, and just let users download and test the rest of the resource.

  • http://www.furioustheme.com Furious Theme

    Seriously its amazing . I will use it in my next pet project. Is there any way to autoplay this slider. That would be awesome.
    Thanks team

  • http://matthill.co/ Matt Hill

    This is a lovely looking demo but unfortunately it’s not keyboard accessible. Tabbing through the demo, when you hit the first link within a slide, the second slide half scrolls over the viewport so the other slides vanish behind it.

    There’s also a problem with focus and source order: the links in the slides can be tabbed to, but the relevant slides don’t get scrolled into view when i tab through the links in each slide. Then If I use a combination of mouse & keyboard to try and get slides to return to normal, the whole thing breaks.

    It would also be better if the source for the Nav went before the slides so that keyboard+screenreader users know up front that there is more content they can navigate.

    There’s no ARIA change states to handle accessibility for the changed views when a slider is selected or moved; in fact there doesn’t seem to be any consideration made to ensuring the code works for keyboard users at all.

    This is a nice demo but it’s not accessible and needs improvements. Heydon Pickering has some good code samples for how to accessibility: http://heydonworks.com/practical_aria_examples/

    • http://codyhouse.co/ Sebastiano Guerriero

      hey Matt, thanks for the feedback, we’ll make sure to improve accessibility with the next update of this resource

      • http://matthill.co/ Matt Hill

        Cool, good to hear. A lot of developers use your demo code “as is”, and they may not yet have learned about why accessibility is so important, so the more you can do to make it accessible, the better the web will be all round. :-)

  • Savion Terrance Smith

    Is there a way to auto change the slides?

  • Niyu Avril

    How to make the slide autoplay?
    Thanks Before..

    • http://codyhouse.co Claudia Romano

      Hi @niyu_avril:disqus and @savionterrancesmith:disqus,
      to implement autoplay, you may try using the setInterval() function to update the slider ( using the nextSlide() function defined in the main.js file). We’ll try to update the actual version with this functionality as soon as possible!

  • Amy

    Is there a way to make the video autoplay when the site first loads? It needs to be my first slide, and it won’t play unless I click on a different slide and then click back to it.
    Also, thank you so much for this! It’s awesome!

    • http://codyhouse.co Claudia Romano

      Hi Amy, I just uploaded a new version which should fix the problem!

      • Amy

        Perfect! Thank you so much :)

  • Amy

    Is there a way to adjust the video slide so that it changes into a regular slide at a different width than 768px?

    • http://codyhouse.co Claudia Romano

      Hi Amy, you need to change the media query value (if you’re using scss, you can update it in the partials->_layout.scss file, otherwise in the style.css file).

      • Amy

        Oh, right. I don’t know how I missed that. Thanks!

  • Abraham Tugalov

    Is this free as well for commercial use?

  • http://urbaninfluence.com/ Stephen Scaff

    Nice work. You guys are killing it. Keep it up.

  • http://burningfiredesign.com/ Matt Rock

    Beautiful work. This is great. Fantastic share (and great documentation, too!) Cheers :)

  • amitmojumder

    Great stuff. Just wondering if the slider could be enabled AUTOPLAY? Thanks

    • http://codyhouse.co Claudia Romano

      We’ll upload a new version with this feature asap! ;)

      • amitmojumder

        looking forward to seeing that in action :)

  • daubrey

    Thank you for the great job, i really like Codyhouse. long life to you

  • CameronJRoe

    Is this on Github?

  • Tofanelli

    Hi Claudia… for any reason i was getting a black dot on my slider…. I just added a ” list-style: none; ” into the first line of ” .cd-hero-slider li ” class…. just leaving this comment here if any other user experience this same problem =)…

    cheers =)

    • http://codyhouse.co Claudia Romano

      Hi, thanks for the comment! that’s probably because you didn’t include the reset.css file ;)

      • Tofanelli

        yes… I didn’t because my theme is done already…. and this reset was making some unwanted things unfortunately….

        But…. it’s an awesome intro…. congratulations!! =)

  • Anthony

    Hi Claudia, I like this hero slider but how i can set the slider in 100% width and 100% height? i dont need the content! thanks for your help!

    • http://cliftontcanady.com/ Clifton T Canady

      Anthony put this cold in you css

      .cd-hero-slider {
      height: 100vh;
      }

      • Anthony

        Great! Thanks, i was trying with 100% and others but didn’t work… but this was the fix! thank you so much! have a nice day :)

      • Anthony

        Other cuestion, how i can do it automatic, like 3 seconds?

        • Tofanelli

          yeah…. most of us are asking to be automatic… Claudia said shes working on this….. in a few days she will drop a new version… =)

          • Anthony

            oh nice, i will wait for that too :) i like the slides automatics but without display controls jeje and this is so cool

          • Daniel

            There’s a script that a fellow reader just added that you can use!

        • Dimosthenis

          A quick and dirty way to add autoplay is this.

          Just add the vars and autoplay function inside the rest of the script

          // Slider autoplay custom function

          var time = 8000; // autoslide delay time

          var navigation = $(‘.cd-slider-nav’);

          var listLength = navigation.find(‘li’).length;

          var slideInterval = setInterval(function(){autoplay()},time);

          function autoplay() {

          var selected = navigation.find(‘.selected’);

          var selectedIndex = selected.index() ;

          if (selectedIndex == listLength-1) {

          selectedIndex = 0;

          prevSlide($(‘.cd-hero-slider’), $(‘.cd-slider-nav’), selectedIndex);

          } else {

          selectedIndex = selectedIndex + 1;

          nextSlide($(‘.cd-hero-slider’), $(‘.cd-slider-nav’), selectedIndex);

          }

          updateNavigationMarker(selectedIndex+1);

          }

          //———

          Don’t forget to add these two:

          clearInterval(slideInterval);
          slideInterval = setInterval(function(){autoplay()},time);

          right before the closing function of click like this:

          $(‘.cd-slider-nav li’).on(‘click’, function(event){

          …..

          clearInterval(slideInterval);
          slideInterval = setInterval(function(){autoplay()},time);

          });

  • Shannon Angdrea

    Hey,
    Just curious, it is possible to have the main content also slide along with the hero slider so that there is 5 separate pieces of content corresponding to each slide?

    • Francesco Milione

      this could be very interesting!

  • http://jaykanakiya.com// Jay Kanakiya

    Hey, I have featured this awesome jQuery plugin at http://jquer.in/

    • http://codyhouse.co Claudia Romano

      Thanks! ;)

  • Hyoubu kyousuke

    slide auto
    the answer 5 sec :

    setInterval(function(){

    var clasenavegacion = $(“.cd-slider-nav span”).attr(“class”);

    var numeroelementolista = parseInt(clasenavegacion.substring(clasenavegacion.length-1,clasenavegacion.length));

    if(numeroelementolista == 5){

    $(“.cd-hero-slider li”).first().attr(“class”,”selected”);

    $(“.cd-hero-slider .selected”).trigger(“click”);

    $(“.cd-slider-nav li”).first().attr(“class”,”selected”);

    $(“.cd-slider-nav .selected”).trigger(“click”);

    $(“.cd-hero-slider .selected”).last().removeAttr(“class”);

    $(“.cd-slider-nav .selected”).last().removeAttr(“class”);

    }else{

    $(“.cd-hero-slider .selected”).next(“li”).attr(“class”,”selected”);

    $(“.cd-hero-slider .selected”).first().removeAttr(“class”);

    $(“.cd-hero-slider .selected”).trigger(“click”);

    $(“.cd-slider-nav .selected”).next(“li”).attr(“class”,”selected”);

    $(“.cd-slider-nav .selected”).first().removeAttr(“class”);

    $(“.cd-slider-nav .selected”).trigger(“click”);

    }

    if(numeroelementolista == 5){

    numeroelementolista = 1;

    }else{

    numeroelementolista += 1;

    }

    $(“.cd-slider-nav span”).attr(“class”, “cd-marker item-” + numeroelementolista);

    }, 5000);

    • Daniel

      Thank you, this is what I’ve been coming back to this page for every day since I found this brilliant slider! I removed the tags and pasted the rest into my main.js file and it worked perfectly (well I had to change the slide count to match my site) thank you very much for this!

  • Hyoubu kyousuke

    I found a better way n_n

    setInterval(function(){
    var clasenavegacion = $(“.cd-slider-nav span”).attr(“class”);
    var numeroelementolista = parseInt(clasenavegacion.substring(clasenavegacion.length-1,clasenavegacion.length));

    if(numeroelementolista == 4){
    $(“.cd-slider-nav li”).first().trigger(“click”);
    }else{
    $(“.cd-slider-nav .selected”).next(“li”).trigger(“click”);
    }

    if(numeroelementolista == 4){
    numeroelementolista = 1;
    }else{
    numeroelementolista += 1;
    }

    $(“.cd-slider-nav span”).attr(“class”, “cd-marker item-” + numeroelementolista);
    }, 2000);

    • Andy Gaut

      Awesome, used it in my project. Although I set a variable for the amount of sides so I only had to change it in one place in the future. Think you just solved everybody’s question too :)

    • http://codyhouse.co Claudia Romano

      Great! thanks

  • Saivamsikrishna

    I want to edit icon navigation and put my own icons can some one help me, please and all my icons are not in svg and also they are all not in one file.

  • Ravi

    HI Claudia,

    I would like to use the same navigation button on top and bottom of the slider, already we had in bottom how can i do it on top. i can able to do it by changing the below code bottom element teg. but i need to reuse the whole code for top buttons..cd-slider-nav

    {

    position: relative;

    width: 100%;

    bottom:81%;

    z-index: 2;

    text-align: center;

    height: 55px;

    background-color: rgba(0, 1, 1, 0.5);

    }

    Thanks,
    Ravindra

    • http://codyhouse.co Claudia Romano

      Hi Ravi,
      I suppose you may need to duplicate the html code if you want to have 2 slider navigations.

  • http://marcobellante.it Marco Bellante

    Hi Claudia,
    how can I set the video as first visible slide?

    • http://codyhouse.co Claudia Romano

      Hi Marco,
      a couple of weeks ago, I uploaded a new version of the resource fixing this bug. Are you sure you have the last version?

      • http://marcobellante.it Marco Bellante

        Yep… and I looked at the code and I found the autoplay. It is strange, locally it did’t work, but after the uploading anything went right ;)
        Tnx

  • Yamiko Mikaey Yakobe

    HI there, I need a little help! The slider works great, and it was exactly what i wanted after a little customization! I have one problem though, my page wrapper seems to have shrunk after adding the slider and i can’t figure out what’s causing it to do so! if you can help, THANKS IN ADVANCE

    • http://codyhouse.co Claudia Romano

      Hi Yamiko,
      make sure that your wrapper doesn’t have one of the classes used in our demo (it may be inheriting some style). Hope this helps!

  • Chris Wenzel

    Hi there. I am trying to familiarize myself with this slider. Everything so far has worked great. I do have one question about the video in the slideshow. I noticed that if the webpage is loaded at the smallest supported browser size then stretched larger dimensions that supports video playback, the video won’t play. Do you know how to overcome this issue so that the video triggers?

    Thanks in advance!

  • Wahidur Rahman

    great slider, how can I auto play the slider ?

  • Hyun Jun, An

    It’s cool, thanks :)

  • Dvir Julius

    First of all, it looks like a great slider.
    Actually, I am lost here. I have downloaded the demo files, and set it up on my website.
    When the screen resolution is greater than 768px, none of the images are shown, and the video is not playing.
    When the screen resolution is lower than 768px, the images are shown, and replacement image is shown instead of the video.

    What I am doing wrong? Why the images and video are not shown on resolution greater than 768px?

    Thanks,
    Dvir

    • http://codyhouse.co Claudia Romano

      Hi Dvir, are you using sass? In that case, make sure to include the file partials/_layout.scss. Hope this helps!

      • Dvir Julius

        Hi Claudia, thank you very much for the prompt reply. I am using the CSS files only. My header.tpl file is the main file. I included the JS files and both CSS files.
        Any clue?

  • http://codyhouse.co Claudia Romano

    @disqus_OJGBDQRM0Z:disqus @andygaut:disqus @danielbigred:disqus @disqus_9r1zd3EFHc:disqus @tofanelli:disqus @disqus_8GGtG4y3PZ:disqus @amitmojumder:disqus @savionterrancesmith:disqus just uploaded a new version with autoplay feature implemented. Sorry it took so long! :)

    • Tofanelli

      WoW!!! nice job @claudiarrromano:disqus!!! thanks very much!!! =)

      just a quick question… i didn’t downloaded yet, but… just to know…. can i choose between automatic play or not?

      Cheers =)

      • http://codyhouse.co Claudia Romano

        Yes! you can add/remove the autoplay class from the ul.cd-hero-slider to activate/deactivate the autoplay.

        • Tofanelli

          Great! Went from excellent to awesome!! Thanks very much Claudia! =)

  • Rickey Mitchell

    Can anybody point me in the right direction on where to get info on editing / changing the Nav icons? Very new to working with SVG, any changes I make in Illustrator to the supplied SVG file just breaks the icons. Any help would be super appreciated!

  • Matilda

    I can’t seem to get the autoplay to work (I downloaded it today so I should have the new version!). Do you have any idea why this might be? You could check the design here: http://mhdesign.blogg.se/tre

    • http://codyhouse.co Claudia Romano

      Hi, You need to add the .autoplay class to the ul.cd-hero-slider element. If it still doesn’t work, try clearing you cache and download the file again!

      • Matilda

        Thanks for the quick answer! Unfortunately I’m not that good att css/js and I can’t seem to find how and where (which file) I am supposed to put it. Would you care to easily guide me through it? :-P Thanks again!

        • http://codyhouse.co Claudia Romano

          Hi Matilda, the class has to be added to the element in the index.html file (you may check the downloadable files!)

          • Matilda

            Will the problem with the slider going both directions get fixed then as well? :-)

          • http://codyhouse.co Claudia Romano

            I’m not sure which is the problem you’re referring to. The slider goes from right to left when you choose a previous slider.

  • Bold Design

    Hi Claudia – great demo thanks! I’m having a small problem that I was hoping you might have some insights on… I have stripped out all of the slides, leaving me with only one for a video. Everything is working great except on the iPad, the video will not play? It will only show the fallback image for mobile? I have been playing with the media queries and nothing seems to work. Any thoughts would be extremely appreciated! Thanks in advance. http://www.bolddesign.ca/clients/hero/

    • http://codyhouse.co Claudia Romano

      Hi, we assign a display:none to .cd-bg-video-wrapper on small devices, and a display: block if width device > 768px; you should try changing this mq value. Hope this helps!

      • Bold Design

        Nope, that’s not it. Setting the cd-bg-video-wrapper to always be block still doesn’t allow the video to appear on the iPad. I have tested the direct link to the video and it will play in the browser so the format is fine. Any other thoughts?

        • http://codyhouse.co Claudia Romano

          Hi, is the video loaded and not played or not loaded at all? Also, please make sure to use the last version of the resource (about a month ago I uploaded a version fixed a bug with video autoplay).

  • IMBatman

    Just one more thing left to implement to make it perfect for me. Swipe left and swipe right functions as the site I’ll be implementing it on has a massive amount of hits from iPad, Android Tablet devices. Is anyone working on this yet or will I be the only one?

  • jack heeney

    Hello, I am using this great slider for a website that i am making however i am having trouble with changing the icons for the slider tabs.

    Is there an easy way to do this please?

    • http://codyhouse.co Claudia Romano

      Hi Jack, give a look at my reply to Rickey Mitchell (below). Hope this helps!

      • jack heeney

        Hey thanks i have managed to change the slider tab icons now!

  • ALI ABDALKREEM

    hi i add autopaly class but i did’t work can ny one help me palzzzzz :,
    (

    • http://codyhouse.co Claudia Romano

      If you download the new resource version, the autoplay is already working!

  • Adrian C.

    how to make the slider always go forward in the same direction, not going back to first slider.. thx

  • anotherstrongopinion

    hello, thank you for this great template!!! i am trying to implement this slider into an existing html file. i have it working, however i am trying to move the content down 110px to allow for my social media bar. i am able to add 110px to the top but then the responsive feature does not really work. the text files and buttons all move together.

    • http://www.portcitytechnology.com Dave Haertel

      Try adding a new section for the social media bar. Segregating the actual layout sections will probably make the code easier to manage and you would then be able to style just that section.

  • Nikhil

    Very usefull slider…amazing
    Visit my portfolio website http://www.nikhilmangal.com

  • http://therealitykeeper.tumblr.com alien-pimp

    it looks lovely like seriously veeeery nice haha
    but can i please have some details on how to add more slides on? i might’ve missed where you explained but when I’ve added more slides the navigation buttons will go back to ‘highlighting’ the first slide as my first added slide comes up.
    thank you!

  • Anton

    Really cool stuff – thank you very much.
    Just a question:

    How is the easyest way to link within one slide (via button) to another slide?

    For example to say “Button 1: more infos here” and (thats the one) “Button 2: go to next feature”.

    Thanx!
    Anton

    • http://codyhouse.co Claudia Romano

      Hi Anton, if you need to go to the next slide, you may try using the nextSlide() function (defined in the main.js) and bind it to the click event on you button. Hope this helps!

      • Anton

        Thanx, Claudia – im’ gonna try this!

  • http://www.portcitytechnology.com Dave Haertel

    Hi there, great slider, am currently only getting one image to be called. First of the li items has the correct background image set, however the subsequent images don’t load. Have anything that jumps out that might be wrong? Paths are correct, as all the images are in the same folder and the first one is displaying, and the path to the images was copy and pasted and just adjusted for the different image name.

    • http://codyhouse.co Claudia Romano

      Hi Dave, please make sure you have updated the background-image url in the style.css (or style.scss if you’re using sass).

      • Alex Wenz

        Same problem here … 3 images in slider, all images are loaded (network inspector in firebug) only first image is shown

      • Ariel Gaxiola

        I am also getting this issue…i have changed the code in many different ways. Even looking at your demo, the background images are not showing…except of the last tab. I know its nothing on my end i just dont know what to do at this point. Unlike Alex i didnt change any css code aside from the image sources

        • http://codyhouse.co Claudia Romano

          Hi Ariel, this is because we set a background-image for the last slide only (in the style.css file, you can find the background-image property set for the .cd-hero-slider li:nth-of-type(5)). You should set the same property for the other slides if you want to add a background image. Hope this helps!

          • Adam Jones

            Hi Claudia. I’m having the same problem as Alex, Ariel and David. Only my first image shows up, unless I resize to the smallest size – then the second image shows up. I haven’t changed much in the CSS at all, just the image paths.

        • Adam Jones

          Hey Ariel. Look for the line:

          @media only screen and (min-width: 768px)

          Remove the “background-image: none” text in each class in this media query section (for each nth-of-type).

  • Susette Norman

    Hi Claudia!
    I set the video as first visible slide but autoplay for
    the first slide as video seems not work properly. it doesnt star when I
    open de page… Is this one the latest version?
    ’cause I just downloaded and still doesnt auto play the video when its in the first slide
    thank you :D

    • Susette Norman

      I ‘ve read the coments below about the autoplay, but I just want to autoplay the video in the first slide, all the navigator I should keep them static
      please Someone help me :(
      I’ve tryed writting autoplay in cd-bg-video-wrappe but I guees that doesnt work….
      HELP!!!!

      I hope make me understand, sorry the lame grammar :(

      • http://codyhouse.co Claudia Romano

        Hi Susette,
        the .autoplay class is not related to the video, so you don’t need to add it to the ul.cd-hero-slider.
        About the video, make sure to use this html structure:

        That should do it!

        • Susette Norman

          wow it works!!! thanks a lot claudia! :D

  • vinoth

    Video slider didn’t worked in safari ,while we using Webm format

  • vinoth

    Video slider didn’t worked in safari ,while we using Webm format,so please give me possible solutions

    • http://codyhouse.co Claudia Romano

      Hi, Webm video is not supported in Safari so you should try adding a different format (e.g. mp4).

      • vinoth

        so we have add two video’s i.e mp4 ,Webm .right

      • vinoth

        Is it possible to use only mp4 video format ?

  • Hamed nourhani

    hi .thanks a lot for slider

  • vinoth

    How can i make a video visible in mobile

    • http://codyhouse.co Claudia Romano

      Hi Vinoth, try removing the display: none from the .cd-bg-video-wrapper on the mobile version. Hope this helps!

      • http://shahobayed.com Shah Obayed Ahmed

        I want to stop the loop. how can I do that?

    • Filipe Oliveira

      Just delete the video div and use a normal video tag ” worked for me.

  • Shah Obayed Ahmed

    Can I use youtube video on slider?
    The slider goes to next slide before ending the video? Is it possible to slide into next slide after the video end?

  • Yuvaraj S

    How can I add touch option for mobile?

  • http://shahobayed.com Shah Obayed Ahmed

    I want to stop the loop. how ca I do that?

    • http://codyhouse.co Claudia Romano

      Hi Shah, to disable autoplay, you can remove the .autoplay class from ul.cd-hero-slider element.

  • Andrey Silyanov?

    Hi Claudia. Thank you for the template, it looks and works very nice.
    Unfortunately, I’m not good at js, so I can’t find the place where I could change the time of a slideshow.
    Thank you.

  • Angel

    Hi Claudia. Thank you for the great slider. Just want to ask if any possible way to make the slides go fade, instead of slide away.

    • http://codyhouse.co Claudia Romano

      Hi Angel, yes but you may need to change the css a little (for example in the move-left/move-right classes, you should add a fade effect and remove the translation). Hope this helps.

      • Angel

        Thank you for your reply, Claudia. Can i have lil more help. cuz i tried on my side but not succeeded.
        I will appreciate your help. What exact classes need to be changed with what?
        Thank you for your help.

  • jack heeney

    Hello,

    Great work here i really like this!

    Is there a way to make it autoplay through the tabs? and each page?

    If so could you please get back to me with an answer please?

    Thank you so much,

    Jack

  • Disarto

    Hi Claudia, great slider!

    But how i can create next/prev navigation buttons?

    • https://eg.linkedin.com/in/michealfarag Michael

      same questions here ?

  • Giulio

    Hi Claudia really Great Job!
    Is possible to pause the animaton on mouse over?
    Thanks

    • Greg L

      Where did you add the code? I was trying to do exactly this on my site.

      • Giulio

        Hi has been modified the function function autoplaySlider as showed

        and added

        var VSliderHome = true;

        $(“#SliderHome”).hover(function() {

        VSliderHome = false;

        }, function() {

        VSliderHome = true;

        }

        );

        in the html has been modified

        Bye

  • viji

    Hi,
    I need to add the previous and next buttons for slider, Please reply me, its important to my project.

  • http://digitaldragondesign.com Lanze

    Hello Claudia,

    Do you know of any big name websites that are using your hero slider? I love the clean design and efficiency of the slider, but the higher-ups are looking for some reasurances that your slider is not a vonerablity.

    Thanks, L.

  • Tanmoy Mondal

    But how i can create next/prev navigation buttons?

  • legolass73

    how to disable automatic slide animation while keeping

  • Brenno SILVA DA GRAÇA

    How can I change the images icon in the down menu? Where have icons of home, mobiles, etc.

  • timb

    Swipe
    left and swipe right functions on mobile devices. Is
    anyone working on this yet?

  • Lder Vilela

    Olá Claudia.
    Existe uma coisa que não consigo perceber, como conseguiste colocar o video em background a correr no ipad?
    Obrigado pelo tuturial.

  • David DeMesquita

    Hi Claudia,

    I was just wondering if there was a way to have multiple videos on the slider? Like a different background video for each slide.

    Thanks so much!

    • http://codyhouse.co Claudia Romano

      Hi David, yes you can. you should apply the .cd-bg-video to each slide and set the proper data-video. Hope this helps!

      • David DeMesquita

        Thank you for the reply, Claudia! I love the slider. But I’m not very good at js. Can you give me an example of how the js code would look with a second data-video? Thank you so much!

  • http://www.fallenartworks.com Devin Fallen

    Hello Claudia,

    Just wondering, is there any way to adjust the slider speed for the hero slider?

    Thanks!

    Devin F.

    • http://codyhouse.co Claudia Romano

      Hi Devin, yes but you should change the CSS transition-duration values in the style.css file (or style.scss if you’re using sass)

      • http://www.fallenartworks.com Devin Fallen

        Thank You!!

      • brassmonkey601

        Which transition attributes?

    • Tushi Arora

      Hi Devin

      I also want to adjust the slider speed, any idea how can we do it.. If you have fixed your’s so please explain how can i do this.

      Looking forward hearing from you.

      Regards
      Sumit

  • https://eg.linkedin.com/in/michealfarag Michael

    can I create next/prev navigation buttons?

    • http://codyhouse.co Claudia Romano

      Hi Micheal, yes you can. You should try to give a look at how we did it here: http://codyhouse.co/gem/expandable-image-gallery/. Hope this helps!

      • https://eg.linkedin.com/in/michealfarag Michael

        Really I appreciate you fast replay – Thank you Claudia :)

        • Janet

          Please explain how you altered the code to show the buttons.

          Thank you

          • strigga

            would be nice!

      • strigga

        thank you for this great slider! but you can see that many users here
        want to know how to make the next/prev buttons work. please explain.
        thank you!

  • Deenisha

    Hi, How can i get the video slider to work with a url instead of self hosted?

  • http://bounethone.ciao.jp/ Bounethone Sanasinh

    Very good ones = ອອກແບບໄດ້ດີຢ້ຽມ ຂອບໃຈທີ່ແບ່ງປັນ

  • Srinivasa Kolli

    Thanks for the Slider. Is there any way I can make it to slide always in one direction like an Infinite Slider. Now last slide moves in reverse direction to reach to first slide. Rather if first slide append to Last slide for a seamless animation, then that would be great.

  • Giuly

    Good Slider! Thank you! How can I pause it on mouse hover event?
    I tried this, but it doesn’t work!
    if(options.hoverpause && options.auto){
    $(this).mouseover(function(){
    clearTimeout(timeout);
    }).mouseout(function(){
    animate(“next”,false);
    })
    }

    • marksman

      i think you can try this if your still looking:

      $(‘#cd-hero-slider’).hover(

      function(){ $(this).removeClass(‘hover’) }
      )

      am not sure of it but you can try it…

      • Giuly

        I tried it, but unfortunately it doesn’t work. Thank you anyway :)

      • Zono

        just clear autoplay class with js while mouse over the slider. And so on On mouse leave add autoplay class back to the div. Hope this help.

    • Татьяна Петрова

      in main.js after first line: setAutoplay(slidesWrapper, slidesNumber, autoPlayDelay);

      I added:

      $(‘.cd-hero’).mouseenter(function(){
      if(slidesWrapper.hasClass(‘autoplay’)) {
      clearInterval(autoPlayId);
      }
      });

      $(‘.cd-hero’).mouseleave(function(){
      if(slidesWrapper.hasClass(‘autoplay’)) {
      autoPlayId = window.setInterval(function(){autoplaySlider(slidesNumber)}, autoPlayDelay);
      }
      });

      and second line in sliderNav.on(‘click’,…
      setAutoplay(slidesWrapper, slidesNumber, autoPlayDelay);

      will be
      //setAutoplay(slidesWrapper, slidesNumber, autoPlayDelay);

      sorry fo my english

  • Jan Bantolinay

    Great slider. I used it on my site and i’d change the slide effect to fade. But i can’t able to get it. I follow your advice to add fade css effect and remove the translation. It’s kinda working but i don’t get it right. Here’s the site http://wptechguys.com/roam/. Can you help

  • Dennis Pritz

    Great work!!!
    It`s possible to create “submenus”?
    Like “Slider in Slider” or smth like that?

  • MDP

    Hi there, I know someone tried to answer this before but I still don’t get it. How do you Pause on Hover?

  • Shutterfashion

    Great slider! Im struggling a bit with video though. Does it needs ti be self-hosted, and does it has to be in the /asset/ url?

  • marksman

    hi,can any one help please? i am trying to execute some php in one of the slides but i cannot, the echoing comes the php commented, what should i do?

  • somnio

    Hi!
    First of all I want to say WOW. Really love this!
    But I have a strange problem.. The video I’ve added is in both webm and mp4 and they work fine in Firefox, Safari, Chrome but doesn’t show up in Explorer 11 and in Microsoft Edge, any solution for this?

    And one more thing where do I put the “.autoplay” so the slideshow auto plays, can’t find it anywhere :)

    Thanks again, Jimpa

  • somnio

    Yeah! I maybe should say that your video shows up but not my own videos :(

  • http://aschavesdosucesso.com/ paulo robson

    where is the button of donation.

    It is impossible not help

  • avhadbalu

    @claudiarrromano:disqus : How I can pause the slider on mouse over event?

    • Donald Boers

      I am wondering the exact same thing. Is there someone arround who knows the answer to this?

  • Soul

    Hi I am very new to html and css coding. I would like to use this design or template for my project website. We are using codeigniter I would like to know how should I add this codes into my codeigniter folder.

    I have codeigniter ‘Home.php” as my default controller and ‘home_body’ as loaded inside Home.php. I tried copying all of this codes inside home_body(view php file inside the home controller). but when i tried loading the page it only loads the html codes like the “title 1….etc.” (texts only and bulletins). I also added the downloaded files inside the codeigniter folder such as js, css, img but nothing happens (mywebsite folder is named ‘myweb’). I think the design is not loading but I dont know why, or maybe I am doing or adding the codes wrong (as i’ve said I’m new with this). honestly i just tried adding these codes inside the header also tried it in the body just to try if it’ll work.

    So, pls if anyone could patiently teach me step by step on how to apply this design on my project i would love to learn it thank you

  • Donna Tate

    This was a life saver. How do I mute the background video if it is called in the script?

  • Ethan

    @Claudia Romano Is it possible to have just one video/image playing on large screen but have multiple images on the mobile view?

  • Donna Tate

    Can I have more than 1 banner on a page?

  • Zygmunt Kielkowski

    JQuery blocking slider-navigation. Any idea how to solve this problem?

  • Rehman kamal

    Hi cloudia, Thanks for your template . I wanna add total 8 tab, and wanna change the content with tabs. Will you help me??

    • marionet_92

      Add your tabs in style.css. it works :) !

  • Manjeet Verma

    hello thanks for the beautiful slider, i am facing some problem while i am adding more than 5 slides and navigation icons at the bottom using its creating some problem, while i am clicking on the last navigation icon its taking me to the exact slide but highlighting the first navigation icon. what to do please help me out why its happening.

  • stajan

    Hi, I’m trying to have 2 sliders on the same page, but there seem to be problems with multiple instances of sliders in the same page. I have strange behaviours such as blank slides appearing from time to time. Is there a good method of doing that or is it simply not possible to have multiple sliders on one page ? Thanks a lot.

    • marksman

      did you find a solution yet? am struggling in the same thing right here…

  • Wedson Barreto

    Hi Claudia,

    I used your code to apply a different feature in my website. Instead of one video, I programmed for six and each and everyone of them has a poster for backup.

    I was wondering how can I insert this poster in the JS code when videos cannot be shown.

    EX: HTML RESULT:

    Thanks! :D

    • http://codyhouse.co Claudia Romano

      Hi Wedson, on mobile the video is not loaded, so you could set a background-image for the li.cd-bg-video element. Hope this helps!

  • James Smith

    Hi,

    First thank you for this wonderful effort.

    I am wondering if one can replace the icons on the bottom with “previous and next” buttons.
    If so would you be able to provide a quick example of how one would do this.

    Thank You

    James

  • http://jpmuga.tumblr.com/ Jose Muga

    Can someone show me how to change the icons of the slider? I know its svg based but can i use png? I just need help

  • Денис Денисов

    Hello, firefox 41.0.2 (ubuntu linux) menu is hide. Help me.

  • Tushi Arora

    Hi Claudia

    I have used the hero slider but getting few issues, Can you please help me.

    1. When slider is loaded its showing extra slide by default even i want to load slide1 when anybody open the site.
    2. How to slow the slide speed currently its going change in 4-6 second may be i want to do it more slow

    Can anybody help please??

    If needed i can share the site url where i am using this

    Looking forward heaing from you.

  • Jeroen

    I try to add a next and prev button with the code from animated-svg-image-slider. To call the nextSlide/prevSlide function. But i can’t get it to work

    sliderNav = $(‘.cd-slider-nav’),
    sliderControl = $(‘.cd-slider-nav-second’),

    sliderControl.on(‘click’, ‘.next-slide’, function(event){
    event.preventDefault();
    nextSlide();
    });
    sliderControl.on(‘click’, ‘.prev-slide’, function(event){
    event.preventDefault();

    prevSlide();
    });

  • Hasif Ck

    Nice Slider! Thank you! is it possible to disable the auto play

    • http://www.themefisher.com Themefisher

      Hello Hasif Ck,
      Yes you can disable this slider’s auto play mood. Just find this line and remove .autoplay class ”

      ” .
      Thanks

  • http://www.corinteractive.com Cory Fechner

    Can load video slider with a vimeo hosted file? or youtube?

  • vivek nimkarde

    menu icon and slider icon are not showing after hosting .it works fine on local machine
    Any one plzz help
    http://www.ssgmcepursuit.com

    • Héctor

      May be you have an 403 Forbidden error? Check de permissions of your folder.

      • vivek nimkarde

        Thank you ,
        i found solution,some hosting provider donot allow svg . i coverted svg to png and its working

  • Héctor

    Great Job Claudia!

    Thanks!

  • Héctor

    Hi,

    I’ve introduced a form in one tab but.. isn’t responsive.. Any solution?

    Thanks!

  • Donald Boers

    Hi Claudia. I still haven’t found a sollution to pause the slider on mouse hover. I tried the sollutions as suggested in some replies but non of them is working

    • Toni Posadas

      This is perfect, thank you!

    • Ronnie Bell

      This was really helpful. thank you :)

  • biju420

    totally love it. very nice. thanks for sharing with us. but i have one question . how to link nested link. example in 3rd slide have content have one link which is for slide number 5. same 5 number slide one link for slide 3 and another link for slide 1. so how to trigger that

  • Seth

    Is it possible to use YouTube and Vimeo for the video background?

  • Paperd Media

    hello, great slider, works well with the site in general just an FYI the slider does not show videos if an iframe is used in another place on the site, also I uploaded the files to the internet in my site and the slider video is not showing is there a possible fix.

  • Theresa Crout

    Great slider–love the autoplay. Is there a way to set the first slide to load in the same direction as the others? For example, slides 1-4 exit moving right, but when slide 1 comes back up, it enters from right (effectively moving left). I’d like it to be a seamless rotation to the right. Is this possible?

    • Usama Saeed

      Hi Theresa!
      I am facing same problem did you find the solution?

  • Bartek Wojtasiński

    Hello. You slider is almost perfect. If it could be possible, how can I add touch swipe or another script for touch devices. Then “hero slider” will be perfect :)

  • Usama Saeed

    Hi claudia, I like your work. I simply say its awesome.
    I want my slides to move from left to right (showing slide from left & disappear on right).
    Is there anyway to do that? I am working on this for realy long time.
    Thanks in Advance

  • Salman

    Hai, It was really fabulous slider, can I use this slider in my client project. Is this under MIT free license or I have to purchase this for commercial use? Kindly confirm.

  • Chris

    How do you add simple previous and next buttons?

  • Corvus Design Studio

    Kudos on an exceptional slider! Fantastic resource ;)

  • SLivio

    How do you add a simple item (…) after the slider is loaded?
    (nice carousel)

  • Aditya Kaushik

    hello admin, can you provide me code to stop the hero slider onhover in https://codyhouse.co/demo/hero-slider/index.html page.

  • Aditya Kaushik

    Claudia Romano Please solve this query ASAP..

  • Aditya Kaushik

    this slider haven’t stop on hover as other sliders.

    • Rob Bartlett

      Hi Aditya

      Donald Boers answered this further down, worked for me:

      He added the following just before the removeClassPrefix function at the end:

      slidesWrapper.on(‘mouseover’, function() {

      clearInterval(autoPlayId);

      });

      slidesWrapper.on(‘mouseout’, function() {

      setAutoplay(slidesWrapper, slidesNumber, autoPlayDelay);

      });

  • Tiago Riquelme

    Hi Claudia
    thanks for nice slider!
    i am facing some problem while i
    am adding more than 5 slides (exactly 6)
    and navigation icons at the bottom using its creating some problem, while i am clicking on
    the last navigation icon its taking me to the exact slide but
    highlighting the first navigation icon …. same in autoplay mode

    what to do ? I been trying everything but nothing

    Please help me out
    why its happening.
    Thank You very much
    Best Regards,

    • http://nickkellet.com/ Nick Kellet

      Did you solve this? I’m seeing same issue.

    • Matteo Vavusotto

      easy

      .cd-slider-nav .cd-marker.item-6 {

      -webkit-transform: translateX(500%);

      -moz-transform: translateX(500%);

      -ms-transform: translateX5400%);

      -o-transform: translateX(500%);

      transform: translateX(500%);

      }

      .cd-slider-nav li:nth-of-type(6) a::before {

      background-position: -96px 0;

      }

      .cd-slider-nav li.selected:nth-of-type(6) a::before {

      background-position: -96px -24px;

      }

  • Matteo Vavusotto

    Hi Claudia, i`m studying ur slide and i using it for my web site, but i have a problem…I need to show a div in the main (down then slide ) when HeroSlide change slide.

    Slide1=Show div1
    Slide2=Show div2
    ecc…

    Can u help me ?

    Thank You very much

    Best Regards,

  • eresh khan

    Thank you

  • ruben

    How can I have just 3 slides with background images each one? I’ve tried to do it but the slides are showing a white background