html Christophe Frenette写的一支笔。

Posted 2021-05-11

*,
:before,
:after{
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
	     -moz-box-sizing: border-box;
	          box-sizing: border-box; 
}

html,
body,
.slider,
.slide{
  width: 100%;
  height: 100%;
}

.slider{
  border: 2px solid #000;
  white-space: nowrap;
  font-size: 0;
  overflow: auto;
  
  text-align: center;
}

.slider h1{
  position: relative;
  top: 50%;
  
  -webkit-transform:translate(0, -50%);
     -moz-transform:translate(0, -50%);
      -ms-transform:translate(0, -50%);
       -o-transform:translate(0, -50%);
          transform:translate(0, -50%);
}

.slide{
  display: inline-block;
  font-size: 16px;
  position: relative;
}

#slide1{
  background: red;
}

#slide2{
  background: green;
}

#slide3{
  background: blue;
}

.slide__nav-prev,
.slide__nav-next{
  position: absolute;
  top: 50%;
  line-height: 60px;
  margin-top: -30px;
  padding: 5px;
  font-size: 2rem;
  color: #fff;
  text-decoration: none;
  background: rgba(0,0,0, .25);
}

.slide__nav-prev{
  left: 20px;
}

.slide__nav-next{
  right: 20px;
}

.hidden{
  visibility: hidden;
  opacity: 0;
  
  -webkit-transition: opacity 500ms;
     -moz-transition: opacity 500ms;
       -o-transition: opacity 500ms;
          transition: opacity 500ms;
}

.visible{
  visibility: visible;
  opacity: 1; 
}

$(function(){
  
  $('.js-goto-slide').click(function(e){
    
    var $navs = $('.js-goto-slide'),
        $curr_nav = $(this),
        $curr_slide = $nav.parent(),
        $next_nav = $next_slide.find('.js-goto-slide'),
        $next_slide = $($nav.attr('href')),
        $slider = $curr_slide.parent();
    
    alert('test') 
    
    //$navs.addClass('hidden');
    //$curr_nav.removeClass('hidden');
    
    $slider.animate({
        scrollLeft: $slider.scrollLeft() + $next_slide.offset().left
    }, 2000, function() {
      
      //$curr_nav.addClass('hidden');
      //$next_nav.removeClass('hidden');
    });
    
    e.preventDefault();
    history.pushState({}, '', this.href);
  });
  
});

psBvb
-----


A [Pen](http://codepen.io/Grimeau/pen/psBvb) by [Christophe Frenette](http://codepen.io/Grimeau) on [CodePen](http://codepen.io/).

[License](http://codepen.io/Grimeau/pen/psBvb/license).

<ul class="slider">
		  <li class="slide" id="slide1">
		    <h1>Slide 1</h1>
    
    <a class="slide__nav-next js-goto-slide" href="#slide2">></a>
		  </li>
  		<li class="slide" id="slide2">
  		  <h1>Slide 2</h1>
    
    <a class="slide__nav-prev js-goto-slide" href="#slide1"><</a>
    <a class="slide__nav-next js-goto-slide" href="#slide3">></a>
  		</li>
		  <li class="slide" id="slide3">
		    <h1>Slide 3</h1>
        
    <a class="slide__nav-prev js-goto-slide" href="#slide2"><</a>
		  </li>
</ul>