Блог

Главная - Вопросы по программированию - конфликт html-ссылки и слайдера

конфликт html-ссылки и слайдера

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

Я использую ползунок прокрутки с помощью мыши или щелчком мыши по изображению. Моя проблема в том, что другие ссылки, такие как в нижнем колонтитуле или другие, больше не работают. Я добавил «onclick =» window.open (this.href); return false; «но теперь слайд больше не работает при нажатии на ссылку нижнего колонтитула. Ценю помощь

 $(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">brad@mail.com</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>

Комментарии:

1. Добавьте onkeypress=»window.open(this.href); return false;» в свой код

Ответ №1:

Jquery верен, просто вам нужно вывести нижний колонтитул div за пределы <nav> тега.

 <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">brad@mail.com</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>

Комментарии:

1. Спасибо Анише, я тоже тестировал так, он работает хорошо, но нижний колонтитул отображается сверху года…

2. да, я также видел проблему с нижним колонтитулом. Я думал, что это будет управляться через Html team

3. Хорошо, у меня есть другое решение. сохраняйте div нижнего колонтитула в теге <nav> . В разделе Jquery измените — $(nav a) на $ (‘nav #nav-thumbnails a’) везде, где nav упоминается в jquery. Добавить #nav-эскизы после nav

4. Замечательно! Я только что изменил — $(nav a) на $(‘nav #nav-thumbnails a’), и он отлично работает;) большое вам спасибо, Аниша ;))

5. Я не понял «Добавить # nav-эскизы после nav»

Ответ №2:

Добавьте onkeypress=»window.open(this.href); return false;» в свой код

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

Удалите приведенный ниже код

 $('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();
});

Комментарии:

1. Спасибо, Дхаарани, ссылка работает отлично, но слайдер перестал работать после clic link

2. Если остальная часть кода написана на jQuery, было бы более последовательно добавлять обработчик событий с помощью jQuery, а не onclick="" Редактировать: неважно, что уже есть много встроенных JS.

3. @ Gwen Если один раз щелкнуть ссылку в нижнем колонтитуле, страница будет перенаправлена на другую страницу. таким образом, слайдер не отображается. Это обычная функциональность.

4. @Gwen Thil удалите приведенный ниже код в вашем js. $(‘nav a’).click(function(e) { // При нажатии на ссылку найдите слайд, который указывает на var newslide = parseInt($(this).attr(‘href’)[1]); // найдите, как далеко он находится от текущего слайда var diff =newslide — currSlide — 1; showSlide(diff); // показать этот слайд e.preventDefault(); });

5. все еще проблема со слайдом, когда он возвращается на сайт, но здесь много проблем..

Ответ №3:

добавьте этот код в свой js-файл.

 $('#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">brad@mail.com</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>

Комментарии:

1. $(‘#nav-thumbnails a’).click(функция(e) { var newslide = parseInt($(this).attr(‘href’)[1]); var diff = newslide — currSlide — 1; showSlide(diff); e.preventDefault(); }); добавьте этот код в свой js-файл. Теперь все работает нормально. проверьте это. @ Гвен Тил

2. Спасибо, я внес некоторые изменения, я отделил заголовок от тега nav, теперь я также могу поместить ссылку туда, куда хочу;) При выборе слайдов с помощью прокрутки не выбираются правильные изображения. Я разместил сайт в Интернете, чтобы показать вам hellotheme.fr/site/horizontal-scroll-jacking

3. @ Gwen Thil Все в порядке. Нет проблем. вы новичок в stackoverflow, верно.

4. Спасибо .. можете ли вы помочь мне понять, почему (поскольку я добавил заголовок id) при выборе слайдов с помощью прокрутки не выбираются правильные изображения. Я разместил сайт в Интернете, чтобы показать вам hellotheme.fr/site/horizontal-scroll-jacking

5. в слайдере может быть одно и то же имя идентификатора.

Ответ №4:

Я внес изменения в jquery .Вы можете взять приведенный ниже код.

$(функция() {

     //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);

})

Комментарии:

1. Спасибо, это не работает, есть еще выбор изображения .. Я все равно решил удалить его. Я работаю уже четыре дня, поэтому я отказываюсь. Большое вам спасибо за вашу помощь, вы очень любезны;)