how to add slide 6, 7, 8 .. codepen script

0
votes

I can not add another slide in this script codepen http://codepen.io/jaytauron/pen/RNgPJb I tried to add slide keeping the example in the code but it does not work. For example, the image 6 is not displayed.

Here is how I did it :

$(function() {
  
    //make functions first

    function showSlide(n) {
        // unbind event listener to prevent retriggering
        $("body").unbind("mousewheel");
        currSlide += n;
        // make sure currslide does not go out of min or max boundaries
        currSlide = currSlide <= 0 ? 0 : currSlide >= $slide.length-1 ? $slide.length-1 : currSlide;
        
        // displacement is window width times current slide number
        var displacment = window.innerWidth*currSlide;
        // translate slides div across to appropriate slide
        $('.slides').css('transform', 'translateX(-'+displacment+'px)');
        // give small delay before rebinding event to prevent retriggering
        setTimeout(function() {
           $("body").bind('mousewheel', mouseEvent);
        }, 800);
        
        // change active class on link
        $('nav a.active').removeClass('active');
        $($('a')[currSlide]).addClass('active');
        
    }
  
    function mouseEvent(e, delta) {
        // On upwards scroll, show next slide (+1)
        // otherwise on downwards scroll show prev slide (-1)
        showSlide(delta >= 0 ? -1 : 1);
        e.preventDefault();
    }
    
    $('nav a').click(function(e) {
        // When link clicked, find slide it points to
        var newslide = parseInt($(this).attr('href')[1]);
        // find how far it is from current slide
        var diff = newslide - currSlide - 1;
        showSlide(diff); // show that slide
        e.preventDefault();
    });
  
    $(window).resize(function(){
      // Keep current slide to left of window on resize
      var displacment = window.innerWidth*currSlide;
      $('.slides').css('transform', 'translateX(-'+displacment+'px)');
    });
    
    //declare vars then make things happen
    
    var currSlide = 0; //Keeps track of slide
    var $slide = $('.slide'); //all slides
    // give active class to first link
    $($('nav a')[0]).addClass('active');
    //add event listener for mousescroll
    $("body").bind('mousewheel', mouseEvent);
    
})
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
@-webkit-keyframes fill {
  0% {
    width: 0%;
    height: 1px;
  }
  50% {
    width: 100%;
    height: 1px;
  }
  100% {
    width: 100%;
    height: 100%;
    background: #fff;
  }
}
@keyframes fill {
  0% {
    width: 0%;
    height: 1px;
  }
  50% {
    width: 100%;
    height: 1px;
  }
  100% {
    width: 100%;
    height: 100%;
    background: #fff;
  }
}
@-webkit-keyframes fillColour {
  0% {
    color: #fff;
  }
  50% {
    color: #fff;
  }
  100% {
    color: #333;
  }
}
@keyframes fillColour {
  0% {
    color: #fff;
  }
  50% {
    color: #fff;
  }
  100% {
    color: #333;
  }
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Open Sans", sans-serif;
}

body {
  overflow: hidden;
  font-size: 100%;
}

nav {
  text-align: center;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  z-index: 100;
  height: 100vh;
  left: 0;
  width: 10vw;
  font-weight: 300;
  font-size: 1rem;
}
nav ul {
  list-style-type: none;
  height: 100vh;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
          justify-content: space-around;
}
nav a, nav a:visited, nav a:active {
  text-decoration: none;
  color: #fff;
}
nav a {
  -webkit-transition: color 2s, background 1s;
  transition: color 2s, background 1s;
  padding: 10px;
  position: relative;
  z-index: 0;
}
nav a.active {
  background: rgba(0, 0, 0, 0.9);
}
nav a::before {
  content: "";
  position: absolute;
  height: 0%;
  width: 0%;
  bottom: 0;
  left: 0;
  opacity: 1;
  background: #555;
  z-index: -1;
}
nav a:hover {
  -webkit-animation: fillColour 0.7s forwards ease-in-out;
          animation: fillColour 0.7s forwards ease-in-out;
}
nav a:hover::before {
  -webkit-animation: fill 0.7s forwards ease-in-out;
          animation: fill 0.7s forwards ease-in-out;
  opacity: 1;
}

.slides {
  width: 500vw;
  height: 100vh;
  -webkit-transition: -webkit-transform 0.8s ease;
  transition: -webkit-transform 0.8s ease;
  transition: transform 0.8s ease;
  transition: transform 0.8s ease, -webkit-transform 0.8s ease;
}
.slides .slide {
  height: 100vh;
  width: 100vw;
  background: pink;
  float: left;
  text-align: center;
  background-size: cover;
}
.slides .slide .content {
  width: 80vw;
  padding: 20px;
  background: rgba(255, 255, 255, 0.8);
  margin: 35vh 0 0 15vw;
  border-radius: 5px;
}
.slides .slide .content p {
  padding: 10px 0;
  border-bottom: 1px solid black;
}
.slides .slide:nth-child(1) {
  background-image: url(https://c3.staticflickr.com/3/2636/4151925885_08ddd06f8f_b.jpg);
}
.slides .slide:nth-child(2) {
  background-image: url(https://c4.staticflickr.com/4/3567/3674686610_fa01e84926_b.jpg);
}
.slides .slide:nth-child(3) {
  background-image: url(https://c4.staticflickr.com/8/7223/7004450864_e2960c0e4c_b.jpg);
}
.slides .slide:nth-child(4) {
  background-image: url(https://c3.staticflickr.com/7/6132/5920210210_a16670c195_b.jpg);
}
.slides .slide:nth-child(5) {
  background-image: url(https://c1.staticflickr.com/3/2877/9436373029_1c1b451817_c.jpg);
}
.slides .slide:nth-child(6) {
  background-image: url(../img/6.jpg);
}
.slides .slide img {
  width: 100%;
}
<!DOCTYPE html>
<html >
  <head>
    <meta charset="UTF-8">
    <title>Horizontal Scroll Jacking</title>
    <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>


    
    
    <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>

        <link rel="stylesheet" href="css/style.css">

    
    
    
    
  </head>

  <body>

    
<nav>
  <ul>
    <li><a href="#1">Slide 1</a></li>
    <li><a href="#2">Slide 2</a></li>
    <li><a href="#3">Slide 3</a></li>
    <li><a href="#4">Slide 4</a></li>
    <li><a href="#5">Slide 5</a></li>
    <li><a herf="#6">Slide 6</a></li>
  </ul>
</nav>
<div class="slides">
  <div id="1" class="slide">
    <div class="content">
      <h2>Slide 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
    </div>
  </div>
  <div id="2" class="slide">
    <div class="content">
      <h2>Slide 2</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
    </div>
  </div>
  <div id="3" class="slide">
    <div class="content">
      <h2>Slide 3</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
    </div>
  </div>
  <div id="4" class="slide">
    <div class="content">
      <h2>Slide 4</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
    </div>
  </div>
  <div id="5" class="slide">
    <div class="content">
      <h2>Slide 5</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
    </div>
  </div>
  <div id="6" class="slide">
    <div class="content">
      <h2>Slide 6</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
    </div>
  </div>
</div>
    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.min.js'></script>

        <script src="js/index.js"></script>

    
    
  </body>
</html>

And html.jade

nav

ul each val in [1,2,3,4,5,6] li a(href='#'+val)= 'Slide '+val

.slides each val in [1,2,3,4,5,6] .slide(id=val) .content h2='Slide '+val p='Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?'

2
javascriptjqueryhtmlcsspug
When you try and runthe above snippet and then try to view slide 6 you get the following error "Uncaught TypeError: Cannot read property '1' of undefined" - does that help? – Andy Holmes
no I is not error but the slide does not appear – Gwen Thil

2 Answers

0
votes

You need to update .slides width

1 container : 100vw

2 containers : 200vw

and so on ...

here for 6 containers:

.slides
  width: 600vw
  height: 100vh
  transition: transform 0.8s ease

http://codepen.io/anon/pen/dpZOxz

0
votes

Your code is not working simply because of a typo.

Change this:

<li><a herf="#6">Slide 6</a></li>

to this:

<li><a href="#6">Slide 6</a></li>

Notice the change from herf to href.