skip to Main Content

I use a scroll slider with the mouse or by clicking on image. My problem is that the other links as in the footer or another no longer work. I added “onclick =” window.open (this.href); return false; “but now it’s the slide that no longer works when the footer link was clicked.
Appreciate the help

$(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;
}
html, body{
  height:100%;
}
body {
  font-size: 100%;
  color:#555;
  overflow:hidden;
}

[itemprop="logo"] {
    float:right;
	top:0;
	padding: 20px;
}
[itemprop="description"] {
    margin-top: 120px;
    padding: 20px;
}
[itemprop="name"] {
    text-align: right;
    padding: 20px;
	padding-bottom: 0;
}
[itemprop="faxNumber"] {
    padding: 0 20px 0 0;
    
}
[itemprop="email"] {
    padding: 0 20px 0 0;
    
}
[itemprop="address"] {
    padding: 0 20px 0 0;
   
}
[itemprop="telephone"] {
    padding: 0 20px 0 0;
	color:#4a974d;
	text-decoration: overline;
}

div{
	text-align:right;
	}
h1 {
    font-size: 2.25em;
    font-weight: 700;
	text-align:center;
	padding-top: 20px;
}
h2 {
    font-size: 1.25em;
	text-align:left;
	color:#e7c6c6;
}

#footer {
  
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */ 
   margin-top: 20px;   
}
#footer p {
   color:#555;
   text-align:center;
   font-size: 12px;
}
#footer a{
	color:#555;
	text-decoration: none;
    border-bottom: dotted 1px #555;   
}
nav {
  
  background: #fff;
  position: absolute;
  z-index: 100;
  height: 100vh;
  right: 0;
  width: 10vw;
  font-weight: 300;
  font-size: 1rem;
  width: 300px;
  overflow:scroll;
}
nav ul {
  position: absolute;
  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 {
  /*position: absolute;*/
  -webkit-transition: color 2s, background 1s;
  transition: color 2s, background 1s;
  padding: 3px;
  
  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 img { 
    width:120px;
    float: left;}

#nav-thumbnails {
    display: -moz-flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -moz-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 1em 0.8em;
    
}
#nav-thumbnails h3{
    font-size: 1.25em;
	text-align:left;
	color:#764a4a;
	padding:8px;
    
}
/*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;
}*/
@media only screen and (max-width: 460px) {
  
  nav { 
    float: none;
    margin-right:0;
    width:auto;
    border:0;
    border-bottom:2px solid #000; 
	position: absolute;
	overflow: scroll;
    }
  nav a {
	padding: 3px;
	}
	nav a.active {
    background: none;
    }
  nav img {
    width: 100%;
    }
  .slides {
	display:none;
	}
  #footer {
    position: inherit;
	}
	[itemprop="logo"] {
    float:right;
	top:0;
	padding: 20px;
	width:120px;
}
}

.slides {
  width: 600vw;
  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 {
    max-width: 600px;
    padding: 20px;
    background: rgba(24, 20, 20, 0.35);
    /* margin: 35vh 0 0 15vw; */
    border-radius: 5px;
    position: absolute;
    bottom: 0;
}

.slides .slide .content p {
  padding: 10px 0;
  border-bottom: 1px solid #f2e9e9;
  width: 100%;
}
.slides .slide:nth-child(1) {
  background-image: url(../img/1.jpg);
}
.slides .slide:nth-child(2) {
  background-image: url(../img/2.jpg);
}
.slides .slide:nth-child(3) {
  background-image: url(../img/3.jpg);
}
.slides .slide:nth-child(4) {
  background-image: url(../img/4.jpg);
}
.slides .slide:nth-child(5) {
  background-image: url(../img/5.jpg);
}
.slides .slide:nth-child(6) {
  background-image: url(../img/6.jpg);
}
.slides .slide:nth-child(7) {
  background-image: url(../img/7.jpg);
}
.slides .slide:nth-child(8) {
  background-image: url(../img/8.jpg);
}
.slides .slide:nth-child(9) {
  background-image: url(../img/9.jpg);
}
.slides .slide:nth-child(10) {
  background-image: url(../img/10.jpg);
}
.slides .slide img {
  width: 100%;
}
.slides .slide p {
  color:#fff;
  text-align:left;
}
@media only screen and (max-width: 900px) {
	.slides .slide .content {
    width: 300px;
	}
	.slides .slide .content p {
    padding: 0; 
    border-bottom: 0;
}
}
<!DOCTYPE html>
<html lang="zxx">
  <head>
    <meta charset="UTF-8">
    <title>test</title>
    <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <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>
<main>  

 
<nav>
<header>
<h1>Pepinière Paris</h1>
<!--snippet pour le seo-->						
<div itemscope="" itemtype="http://schema.org/ProfessionalService">
<div itemprop="name">Brewer Digital Marketing</div>
<img itemprop="logo" src="http://img4.hostingpics.net/pics/379486logo.png" alt="logo">
<div itemprop="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquam eget eros vitae facilisis. Donec mollis turpis eu lorem imperdiet, vel pellentesque nunc tempor.</div>
<div>Phone:
<span itemprop="telephone">303-406-1053</span>
</div>
<div>Fax:
<span itemprop="faxNumber">555-555-5555</span>
</div>
<div>Email:
<span itemprop="email">[email protected]</span>
</div>
<div itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">1889 Rutherford Ave</span>
P.O. Box: <span itemprop="postOfficeBoxNumber">5555</span>
<span itemprop="addressLocality">Louisville</span>
<span itemprop="postalCode">40205</span>
<span itemprop="addressCountry">USA</span>

</div>
</div>
</header>
<!--section de navigation-->   
  <section id="nav-thumbnails">
 <h3>La pépinière</h3>
	<a href="#1"><img src="img/1.jpg" alt="image1"></a>
    <a href="#2"><img src="img/2.jpg" alt="image2"></a>
    <a href="#3"><img src="img/3.jpg" alt="image3"></a>
    <a href="#4"><img src="img/4.jpg" alt="image4"></a>
    <a href="#5"><img src="img/5.jpg" alt="image5"></a>
	<a href="#6"><img src="img/6.jpg" alt="image6"></a>
	</section>
  <!--footer-->   
   <div id="footer"><p>Crédit : <a href="https://pixabay.com/"onclick="window.open(this.href); return false;">pixabay.com</a></p></div>
</nav>
</main>
<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>

4

Answers


  1. Add onkeypress=”window.open(this.href); return false;” to your code

    <a href="https://pixabay.com/" onclick="window.open(this.href); return false;" onkeypress="window.open(this.href); return false;">pixabay.com</a>
    

    Remove below code

    $('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();
    });
    
    Login or Signup to reply.
  2. Jquery is correct, just you need take footer div outside the <nav> tag.

    <nav>
    <header>
    <h1>Pepinière Paris</h1>
    <!--snippet pour le seo-->                      
    <div itemscope="" itemtype="http://schema.org/ProfessionalService">
    <div itemprop="name">Brewer Digital Marketing</div>
    <img itemprop="logo" src="http://img4.hostingpics.net/pics/379486logo.png" alt="logo">
    <div itemprop="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquam eget eros vitae facilisis. Donec mollis turpis eu lorem imperdiet, vel pellentesque nunc tempor.</div>
    <div>Phone:
    <span itemprop="telephone">303-406-1053</span>
    </div>
    <div>Fax:
    <span itemprop="faxNumber">555-555-5555</span>
    </div>
    <div>Email:
    <span itemprop="email">[email protected]</span>
    </div>
    <div itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress">
    <span itemprop="streetAddress">1889 Rutherford Ave</span>
    P.O. Box: <span itemprop="postOfficeBoxNumber">5555</span>
    <span itemprop="addressLocality">Louisville</span>
    <span itemprop="postalCode">40205</span>
    <span itemprop="addressCountry">USA</span>
    
    </div>
    </div>
    </header>
    <!--section de navigation-->   
      <section id="nav-thumbnails">
     <h3>La pépinière</h3>
        <a href="#1"><img src="img/1.jpg" alt="image1"></a>
        <a href="#2"><img src="img/2.jpg" alt="image2"></a>
        <a href="#3"><img src="img/3.jpg" alt="image3"></a>
        <a href="#4"><img src="img/4.jpg" alt="image4"></a>
        <a href="#5"><img src="img/5.jpg" alt="image5"></a>
        <a href="#6"><img src="img/6.jpg" alt="image6"></a>
        </section>
      <!--footer-->   
    
    </nav>
     <div id="footer"><p>Credit : <a href="https://pixabay.com/" id="ex_link" target="_blank">pixabay.com</a></p></div>
    </main>
    <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>
    
    Login or Signup to reply.
  3. add this code to your js file.

    $('#nav-thumbnails a').click(function(e) { 
        var newslide =    parseInt($(this).attr('href')[1]);
        var diff = newslide - currSlide - 1; showSlide(diff);  
        e.preventDefault(); 
    }); 
    
    $(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-thumbnails a').click(function(e) { var newslide = parseInt($(this).attr('href')[1]);  var diff = newslide - currSlide - 1; showSlide(diff); 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;
    }
    html, body{
      height:100%;
    }
    body {
      font-size: 100%;
      color:#555;
      overflow:hidden;
    }
    
    [itemprop="logo"] {
        float:right;
    	top:0;
    	padding: 20px;
    }
    [itemprop="description"] {
        margin-top: 120px;
        padding: 20px;
    }
    [itemprop="name"] {
        text-align: right;
        padding: 20px;
    	padding-bottom: 0;
    }
    [itemprop="faxNumber"] {
        padding: 0 20px 0 0;
        
    }
    [itemprop="email"] {
        padding: 0 20px 0 0;
        
    }
    [itemprop="address"] {
        padding: 0 20px 0 0;
       
    }
    [itemprop="telephone"] {
        padding: 0 20px 0 0;
    	color:#4a974d;
    	text-decoration: overline;
    }
    
    div{
    	text-align:right;
    	}
    h1 {
        font-size: 2.25em;
        font-weight: 700;
    	text-align:center;
    	padding-top: 20px;
    }
    h2 {
        font-size: 1.25em;
    	text-align:left;
    	color:#e7c6c6;
    }
    
    #footer {
      
       bottom:0;
       width:100%;
       height:60px;   /* Height of the footer */ 
       margin-top: 20px;   
    }
    #footer p {
       color:#555;
       text-align:center;
       font-size: 12px;
    }
    #footer a{
    	color:#555;
    	text-decoration: none;
        border-bottom: dotted 1px #555;   
    }
    nav {
      
      background: #fff;
      position: absolute;
      z-index: 100;
      height: 100vh;
      right: 0;
      width: 10vw;
      font-weight: 300;
      font-size: 1rem;
      width: 300px;
      overflow:scroll;
    }
    nav ul {
      position: absolute;
      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 {
      /*position: absolute;*/
      -webkit-transition: color 2s, background 1s;
      transition: color 2s, background 1s;
      padding: 3px;
      
      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 img { 
        width:120px;
        float: left;}
    
    #nav-thumbnails {
        display: -moz-flex;
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
        -moz-flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        padding: 1em 0.8em;
        
    }
    #nav-thumbnails h3{
        font-size: 1.25em;
    	text-align:left;
    	color:#764a4a;
    	padding:8px;
        
    }
    /*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;
    }*/
    @media only screen and (max-width: 460px) {
      
      nav { 
        float: none;
        margin-right:0;
        width:auto;
        border:0;
        border-bottom:2px solid #000; 
    	position: absolute;
    	overflow: scroll;
        }
      nav a {
    	padding: 3px;
    	}
    	nav a.active {
        background: none;
        }
      nav img {
        width: 100%;
        }
      .slides {
    	display:none;
    	}
      #footer {
        position: inherit;
    	}
    	[itemprop="logo"] {
        float:right;
    	top:0;
    	padding: 20px;
    	width:120px;
    }
    }
    
    .slides {
      width: 600vw;
      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 {
        max-width: 600px;
        padding: 20px;
        background: rgba(24, 20, 20, 0.35);
        /* margin: 35vh 0 0 15vw; */
        border-radius: 5px;
        position: absolute;
        bottom: 0;
    }
    
    .slides .slide .content p {
      padding: 10px 0;
      border-bottom: 1px solid #f2e9e9;
      width: 100%;
    }
    .slides .slide:nth-child(1) {
      background-image: url(../img/1.jpg);
    }
    .slides .slide:nth-child(2) {
      background-image: url(../img/2.jpg);
    }
    .slides .slide:nth-child(3) {
      background-image: url(../img/3.jpg);
    }
    .slides .slide:nth-child(4) {
      background-image: url(../img/4.jpg);
    }
    .slides .slide:nth-child(5) {
      background-image: url(../img/5.jpg);
    }
    .slides .slide:nth-child(6) {
      background-image: url(../img/6.jpg);
    }
    .slides .slide:nth-child(7) {
      background-image: url(../img/7.jpg);
    }
    .slides .slide:nth-child(8) {
      background-image: url(../img/8.jpg);
    }
    .slides .slide:nth-child(9) {
      background-image: url(../img/9.jpg);
    }
    .slides .slide:nth-child(10) {
      background-image: url(../img/10.jpg);
    }
    .slides .slide img {
      width: 100%;
    }
    .slides .slide p {
      color:#fff;
      text-align:left;
    }
    @media only screen and (max-width: 900px) {
    	.slides .slide .content {
        width: 300px;
    	}
    	.slides .slide .content p {
        padding: 0; 
        border-bottom: 0;
    }
    }
    <!DOCTYPE html>
    <html lang="zxx">
      <head>
        <meta charset="UTF-8">
        <title>test</title>
        <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <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>
    <main>  
    
     
    <nav>
    <header>
    <h1>Pepinière Paris</h1>
    <!--snippet pour le seo-->						
    <div itemscope="" itemtype="http://schema.org/ProfessionalService">
    <div itemprop="name">Brewer Digital Marketing</div>
    <img itemprop="logo" src="http://img4.hostingpics.net/pics/379486logo.png" alt="logo">
    <div itemprop="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquam eget eros vitae facilisis. Donec mollis turpis eu lorem imperdiet, vel pellentesque nunc tempor.</div>
    <div>Phone:
    <span itemprop="telephone">303-406-1053</span>
    </div>
    <div>Fax:
    <span itemprop="faxNumber">555-555-5555</span>
    </div>
    <div>Email:
    <span itemprop="email">[email protected]</span>
    </div>
    <div itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress">
    <span itemprop="streetAddress">1889 Rutherford Ave</span>
    P.O. Box: <span itemprop="postOfficeBoxNumber">5555</span>
    <span itemprop="addressLocality">Louisville</span>
    <span itemprop="postalCode">40205</span>
    <span itemprop="addressCountry">USA</span>
    
    </div>
    </div>
    </header>
    <!--section de navigation-->   
      <section id="nav-thumbnails">
     <h3>La pépinière</h3>
    	<a href="#1"><img src="img/1.jpg" alt="image1"></a>
        <a href="#2"><img src="img/2.jpg" alt="image2"></a>
        <a href="#3"><img src="img/3.jpg" alt="image3"></a>
        <a href="#4"><img src="img/4.jpg" alt="image4"></a>
        <a href="#5"><img src="img/5.jpg" alt="image5"></a>
    	<a href="#6"><img src="img/6.jpg" alt="image6"></a>
    	</section>
      <!--footer-->   
       <div id="footer"><p>Crédit : <a href="https://pixabay.com/"onclick="window.open(this.href); return false;" onkeypress="window.open(this.href); return false;">pixabay.com</a></p></div>
    </nav>
    </main>
    <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>
    Login or Signup to reply.
  4. I have made the changes in jquery .You can take below code.

    $(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 #nav-thumbnails 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 #nav-thumbnails 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 #nav-thumbnails a')[0]).addClass('active');
        //add event listener for mousescroll
        $("body").bind('mousewheel', mouseEvent);
    
    })
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search