pointy-slider
January 18, 2016 | 56 Feedbacks

Pointy Slider

A slideshow with sliding-in panels that unveil new, fixed background images.
Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera
9+

Today’s resource is a simple, responsive slider, with a sharp design and an interesting motion effect: with each new slide item, a sliding-in block of content covers the old one, and unveils a new image.

Inspiration: shft.run

Images: unsplash.com

Creating the structure

The HTML structure is composed by two main elements: a ul.cd-slider for the slides, and a ol.cd-slider-navigation for the slider navigation; both are wrapped inside a div.cd-slider-wrapper.

Note that the ol.cd-slider-navigation element is not directly inserted in the HTML but created using jQuery.

Adding style

On small devices (viewport width smaller than 900px), the slider structure is pretty straightforward: the .cd-slider element has a relative position while its children <li> have an absolute position, with a top and left of zero.
All the list items are translated to the right, outside the viewport (translateX(100%)); the .is-visible class is added to the visible one to move it back into the viewport (translateX(0)).

On bigger devices, the list items are moved back inside the viewport (translateX(0)), while their two children elements, .cd-half-block.content and .cd-half-block.image, are translated to the right (translateX(200%) and translateX(100%) respectively). This way, both elements are outside the viewport, overlapping.

When the .is-visible class is added to the selected list item, the two .cd-half-block elements are moved back inside the viewport (translateX(0)).
We used CSS3 Transitions to animate both elements: for the .cd-half-block.content we set a transition-duration of 0.6s and a transition-delay of 0s, while for the .cd-half-block.image we set a transition-duration of 0s and a transition-delay of 0.3s.
This way, when the .cd-half-block.content has translated of half the total translation value (100%), the .cd-half-block.image is moved back inside the viewport (translateX(0)) instantaneously (transition-duration: 0s). This creates the unveiling image effect.

Here is a quick animation that explains the logic behind the blocks animation (.gif created using After Effects):

pointy-blocks-animation

One thing to note: we set the .cd-half-block.image transition-delay to be equal to half the .cd-half-block.content transition-duration. This is because we used ease-in-out as timing-function, which assures that after half the transition-duration (in our case .3s), the .cd-half-block.content has actually moved of half the total translation value.

Events handling

We used jQuery to create and insert into the DOM the slider navigation.

Besides, we used jQuery to implement a basic slider functionality (touch swipe and slider navigation).

Changelog

Jan 18, 2016
  • Resource released by CodyHouse

Sebastiano Guerriero

UI/UX designer, with a huge passion for Nutella. Co-Founder of CodyHouse. You can follow him on Twitter or Dribbble.

  • sherlack

    nice!

  • Sohaan Pensaalwar

    I am a big fan of this site and you both. Thanks a ton for all your efforts. :)

    • http://codyhouse.co/ Sebastiano Guerriero

      Thanks mate ;)

      • Sohaan Pensaalwar

        Id like you to check the portfolio website I have been working on by joining several pieces from this site and learning through it. I had quit getting better at front end to focus more on UX gigs but this site gave me a good push :)
        http://uxuis.com/

        • http://www.simplelotus.com/ J Sturgis

          Nice work!

        • http://codyhouse.co/ Sebastiano Guerriero

          Great work indeed!

  • Patrick Schubert

    Awesome stuff as usual! :) Thanks a bunch!

    • http://codyhouse.co/ Sebastiano Guerriero

      Glad you like it!

  • Joseph Winters

    Is there anyway to disable the pagination and bring in left and right navigation? Or next and previous slide? I want to use this to build a 100+ slide presentation, and was hopeful I can take away the pagination and just have a left and right button like the 2block template

    • http://codyhouse.co Claudia Romano

      Hi Joseph, the createSliderPagination function takes care of creating the dots pagination, so you should try to comment it out (line 10 in the main.js file). As for the next/prev navigation, you should insert it in your html file; in the main.js, you should listen to the click event on the next/prev navigation and update the slider (using the updateSlider function already defined). Hope this helps!

      • CyberHood

        Hi claudia, can you advise on how i am to “listen to the click event on the next/prev navigation and update the slider (using the updateSlider function already defined)?” – i am new to web design

    • CyberHood

      Hi joseph, did you manage to add the left, right navigation or next and prev slides? If yes, can you share the code?

  • Dmitri Andronik

    Nice job!Would be even more if you could bind a mousewheel event to that :)

  • Joshua Andrew Jourdain

    This is wonderful! Great job. I am however having trouble in mobile; the touch/swipe functionality is unresponsive on my android: http://handsome-octopus.cloudvent.net/

    • Joshua Andrew Jourdain

      maybe this has something to do with it; it occurred after clicking the second button in mobile.

      • Joshua Andrew Jourdain

        And , du, du, du (drum roll), it was MY FAULT! I implemented your files into my dev structure, and in the process unwittingly placed the jquery.mobile script BEFORE the jquery script reference.

        script order matters ;)

        it’s working now. thanks a bunch.

  • http://giometri.com egiova

    Excelentísimo! Elegant and simple. Felicitaciones, I love it.

  • http://www.bdthemes.com/ Selim Rana

    Can you add drag feature please? anyway awesome slider :)

  • grsmnk

    This is great! How can I make slides update automatically? Thanks!

    • Alex Karim Soufi

      Could you share your autoslide code? thanks

      • grsmnk

        (function () {
        var counter = 0;
        if (counter <= here is the quantity of your slides) {
        setInterval(function () {
        updateSlider(counter, sliderPagination, slides);
        counter++;
        if (counter === quantity of your slides) {
        counter = 0;
        }
        }, 4000);
        }
        })();

        I just added this piece of code to the end of the initBlockSlider() function

        • Alex Karim Soufi

          Thank you Sir. Here is my update in case you do not want to hard-code the number of slides and rotation interval:

          Add to HTML:

          //Auto-rotate
          var counter = 0;
          var rotationInterval = $(‘.cd-slider’).attr(‘data-interval’);
          if (counter <= $('.cd-slider li').length) {
          setInterval(function () {
          updateSlider(counter, sliderPagination, slides);
          counter++;
          if (counter === $('.cd-slider li').length) {
          counter = 0;
          }
          }, rotationInterval);
          }

          • grsmnk

            thanks!

          • erinhyland

            Thank you, Alex. When you add the second part (starting with //Auto-rotate…), do you add that to the bottom of the doc within ? I can’t seem to get it to work.

          • Alex Karim Soufi

            Yes, the javascript code goes inside tags. This line: is in the HTML. Let me know if it works.

          • erinhyland

            Thanks, Alex. It wasn’t working when I put it in the footer, after the othe references. Does it go right next to the HTML? In the header? Just trying to figure out why it’s not working. Thank you!

          • Alex Karim Soufi

            Replace “initBlockSlider” function with the following:

            function initBlockSlider(sliderContainers) {

            sliderContainers.each(function(){

            var sliderContainer = $(this),

            slides = sliderContainer.children(‘.cd-slider’).children(‘li’),

            sliderPagination = createSliderPagination(sliderContainer);

            sliderPagination.on(‘click’, function(event){

            event.preventDefault();

            var selected = $(this),

            index = selected.index();

            updateSlider(index, sliderPagination, slides);

            });

            sliderContainer.on(‘swipeleft’, function(){

            var bool = enableSwipe(sliderContainer),

            visibleSlide = sliderContainer.find(‘.is-visible’).last(),

            visibleSlideIndex = visibleSlide.index();

            if(!visibleSlide.is(‘:last-child’) && bool) {updateSlider(visibleSlideIndex + 1, sliderPagination, slides);}

            });

            sliderContainer.on(‘swiperight’, function(){

            var bool = enableSwipe(sliderContainer),

            visibleSlide = sliderContainer.find(‘.is-visible’).last(),

            visibleSlideIndex = visibleSlide.index();

            if(!visibleSlide.is(‘:first-child’) && bool) {updateSlider(visibleSlideIndex – 1, sliderPagination, slides);}

            });

            var counter = 0;

            var rotationInterval = $(‘.cd-slider’).attr(‘data-interval’);

            if (counter <= $('.cd-slider li').length) {

            setInterval(function () {

            updateSlider(counter, sliderPagination, slides);

            counter++;

            if (counter === $('.cd-slider li').length) {

            counter = 0;

            }

            }, rotationInterval);

            }

            });

            }

          • Alex Karim Soufi

            you can download my main.js from http://www.soufi.com/main.js.zip

          • erinhyland

            And, it works! Thank you!!!

          • erinhyland

            Hey, Alex, thanks again for sharing the JS file. One thing I noticed is that the numbers (links) seem to clash with the auto-rotation. For example, if it auto-starts with “1”, then shifts to “2”, and I manually click “4”, it goes to 4, but then goes back to 3 to resume the rotation. If you do the auto-slider, do you recommend hiding those numbers, or is there a way to avoid this clash that you know of?

          • Pranav Raghaw

            @alexkarimsoufi:disqus @claudiarrromano:disqus @seguerriero:disqus Guys, do you know a way by which I can pause the slider on mouseover.

        • Juan Manuel Masud

          Thanks to everybody for the help! This is my colaboration:
          for the interval

          if (counter <= totalSlides) {

          you should use this

          var totalSlides = slides.length;

          instead of this:

          var totalSlides = $('.cd-slider li').length;

          This will work always, even if you have more that one slider working on the page.

  • JerryR

    Wonderful slider, thanks! It works beautifully in Chrome, but in the Microsoft Edge and Internet Explorer 11 browsers (Windows 10), I had to comment out modernizr.js. With modernizr.js, all that shows was totally unformatted content as if the css did not exist.

    • http://codyhouse.co Claudia Romano

      Hi Jerry, that’s strange. I just tested it in Microsoft Edge and it’s working fine. Did you experience this issue with our demo or a local version? Thanks

      • JerryR

        Hi Claudia, it was locally. I moved it to a new location and it’s working now just FINE with Modernizr both locally and online in Edge and IE. Is it difficult to add left and right arrow key navigation? Thanks for all the outstanding demos and have a wonderful day!

        • SDK

          i’m curious about this also – how could we add navigation arrows? also, is there a way to change the numbered pagination into different text to link to each slide?

  • Blake

    Love the site,

    Just curious what the thought process was to generate all of the slider navigation DOM elements in jQuery with such basic functionality, it would have been easy enough to just write in the HTML?

    • http://codyhouse.co Claudia Romano

      Hi Blake, sure you can; but of course you should remember to update the navigation each time you create a new slide. A js function makes that easier ;)

      • http://www.kitdebuse.com themanabouttown

        @claudiarrromano:disqus Hi Claudia – I don’t suppose you could give me a hand with my question above? Great site – really helping me to learn some new stuff.

  • http://www.kitdebuse.com themanabouttown

    Hey great stuff – I’m not sure if this is a simple question or not – I’m wondering if I’m using this template to link to other pages how would I link back to a certain slide rather than first slide only.

    If anyone could give me a hand with this it would be greatly appreciated. Thanks in advance!

  • Samuel Smith

    How would I make the slider say something else besides 01, 02, 03, 04?

    • http://www.kitdebuse.com themanabouttown

      @thevern62864:disqus Simple answer is to go into main.js & find this code and delete the zero on this line: var dotText = ( index+1 < 10 ) ? '0'+ (index+1)

      Full Section:
      function createSliderPagination(container){
      var wrapper = $('’);
      container.children(‘.cd-slider’).find(‘li’).each(function(index){
      var dotWrapper = (index == 0) ? $(”) : $(”),
      dot = $(‘‘).appendTo(dotWrapper);
      dotWrapper.appendTo(wrapper);
      >>>>var dotText = ( index+1 < 10 ) ? '0'+ (index+1) : index+1;<<<< edit this line
      dot.text(dotText);
      });

      • SDK

        hi there… i’m curious, how would I go about changing the numbers to deifferent text? for instance, instead of 01-04, can i have Design, Designer, Neighborhood?

        thx!

  • Robert Lamina

    Nice Work….. !!!!

  • wordsilk

    Thank you for this!

  • http://www.easypeasy.ie Dave Beirne

    Quick Question:
    When the text in each slide is longer (e.g. 3 paragraphs long) then the visible text area becomes hidden. i understand this probably only designed for short pieces of text. But is there a workaround if you want to show more text per slide?

    Thank you and all your work here is amazing!!

    • http://www.easypeasy.ie Dave Beirne

      After thinking about it perhaps i could use a “overflow-y: scroll;” to allow the user to scroll the text but not very elegant solution

  • biju420

    thanks for nice sharing. i love it. but there have any way to trigger from inside div. say like slide number 2 have one link which is for slide one and another link slide for four.

  • CyberHood

    Hi. I am a novice in web design. I’m attempting my first website and came across this slide show to insert into one of my pages. To my knowledge, i inserted all the codes in their respective places but didnt obtain the results. At the risk of sounding like a knob, can someone walk me through this step by step?

  • Stefanie

    Hey,

    I’m trying to have more than one slider on one page but I’ve got huge problems with the navigation because it’s in jQuery but not in the HTML Code…

    Has anybody already done this?

    I really really need your help….

    Thank you …

  • http://jqueryplugins.net/ jQPlugins Buzz

    Awesome slider and we have it featured on our blog site here http://jqueryplugins.net/pointy-slider/

  • Juan Manuel Masud

    Thanks a lot for this :D !
    Here you have a version with auto-rotate, and support for any amount of sliders in the same page:

    jQuery(document).ready(function($){
    var sliderContainers = $(‘.cd-slider-wrapper’);
    var intervals = [];
    var rotationInterval = 6000;

    if( sliderContainers.length > 0 ) initBlockSlider(sliderContainers);

    function initBlockSlider(sliderContainers) {
    sliderContainers.each(function(i){
    var sliderContainer = $(this),
    slides = sliderContainer.children(‘.cd-slider’).children(‘li’),
    sliderPagination = createSliderPagination(sliderContainer);

    sliderPagination.on(‘click’, function(event){
    event.preventDefault();
    var selected = $(this),
    indexPag = selected.index();
    updateSlider(indexPag, sliderPagination, slides);
    });

    sliderContainer.on(‘swipeleft’, function(){
    var bool = enableSwipe(sliderContainer),
    visibleSlide = sliderContainer.find(‘.is-visible’).last(),
    visibleSlideIndex = visibleSlide.index();
    if(!visibleSlide.is(‘:last-child’) && bool) {updateSlider(visibleSlideIndex + 1, sliderPagination, slides);}
    });

    sliderContainer.on(‘swiperight’, function(){
    var bool = enableSwipe(sliderContainer),
    visibleSlide = sliderContainer.find(‘.is-visible’).last(),
    visibleSlideIndex = visibleSlide.index();
    if(!visibleSlide.is(‘:first-child’) && bool) {updateSlider(visibleSlideIndex – 1, sliderPagination, slides);}
    });

    sliderContainer.on(‘mouseover’, function(){
    // we clear the interval
    clear(i);
    });

    sliderContainer.on(‘mouseout’, function(){
    var counter = sliderContainer.find(‘.cd-slider-navigation li.selected’).index();
    var totalSlides = slides.length;
    intervals[i] = setInterval(function () {
    updateSlider(counter, sliderPagination, slides);
    counter++;
    if (counter === totalSlides) {
    counter = 0;
    }
    }, rotationInterval);
    });

    var counter = 0;
    var totalSlides = slides.length;
    if (counter <= totalSlides) {
    intervals[i] = setInterval(function () {
    updateSlider(counter, sliderPagination, slides);
    counter++;
    if (counter === totalSlides) {
    counter = 0;
    }
    }, rotationInterval);
    }
    });
    }

    function clear(i){
    clearInterval(intervals[i]);
    }

    function createSliderPagination(container){
    var wrapper = $('’);
    container.children(‘.cd-slider’).find(‘li’).each(function(index){
    var dotWrapper = (index == 0) ? $(”) : $(”),
    dot = $(‘‘).appendTo(dotWrapper);
    dotWrapper.appendTo(wrapper);
    var dotText = index+1;
    dot.text(dotText);
    });
    wrapper.appendTo(container);
    return wrapper.children(‘li’);
    }

    function updateSlider(n, navigation, slides) {
    navigation.removeClass(‘selected’).eq(n).addClass(‘selected’);
    slides.eq(n).addClass(‘is-visible’).removeClass(‘covered’).prevAll(‘li’).addClass(‘is-visible covered’).end().nextAll(‘li’).removeClass(‘is-visible covered’);

    //fixes a bug on Firefox with ul.cd-slider-navigation z-index
    navigation.parent(‘ul’).addClass(‘slider-animating’).on(‘webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend’, function(){
    $(this).removeClass(‘slider-animating’);
    });
    }

    function enableSwipe(container) {
    return ( container.parents(‘.touch’).length > 0 );
    }
    });

  • Niyaz Poyilan

    How to change the 1,2,3, … navigation to Next and Previous buttons

  • Neoziox

    Sorry, but I don’t found how to add a simple ‘next’ link in the text to the left. I know that I have to use the updateSlider() function, but my attempts was useless. I feel that I’m at the limits of my knowledge, although I think that the solution is not too far. Please. Help me.

  • user

    How to change the number 1,2,3… into arrow marks in both sides