Тема: Slider on click
Показать сообщение отдельно
  #8 (permalink)  
Старый 21.01.2016, 01:04
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Artem_A,

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle.all.js"></script>
<title>Slider</title>
<style>
.wrapper {
    background: rgba(0,0,0,0.3);
    overflow: hidden;
    border: 2px solid #f00;
    width: 200px;
    height: 100px;
}
.wrapper ul {
    margin:0px;
    padding:0px
}
.slider {
    display: block;
    width:100%;
    height:100%;
}

.imageClass {
    width: 100%;
	height: 100%;
}
.about_us_slider{
  margin-top: 2000px;
}

</style>
<script>
(function ($) {
    $.fn.scrollTo = function (speed, easing, callback) {
        $('body, html').animate({
            scrollTop: this.offset().top
        }, speed, easing, callback);
        return this;
    };
}(jQuery));
$(function () {
var slider = $('#apple_slider').cycle({
    fx:      'scrollLeft',
    speed:    2000,
    timeout:  2000
        }).cycle('pause');

$('[href="#ar"]').on({click : function(event) {
event.preventDefault();
$('.about_us_slider').scrollTo(1000, 'swing',function() {
   slider.cycle('resume')
})
}})
});



</script>
</head>
<body>
<nav id="header_menu">
        <a href="#" class="active">Hello</a>
        <a href="#ar">About</a>
        <a href="#">Services</a>
        <a href="#">Portfolio</a>
        <a href="#">Team</a>
        <a href="#">Blog</a>
        <a href="#">Contact</a>
      </nav>

<div class="about_us_slider  wrapper" >

             <ul id="apple_slider">
                  <li><img class="imageClass" src="http://www.a2zwebhelp.com/images/slider/img1.jpg"/></li>
                  <li><img class="imageClass" src="http://www.a2zwebhelp.com/images/slider/img2.jpg"/></li>
                  <li><img class="imageClass" src="http://www.a2zwebhelp.com/images/slider/img3.jpg"/></li>
                  <li><img class="imageClass" src="http://www.a2zwebhelp.com/images/slider/img4.jpg"/></li>
                  <li><img class="imageClass" src="http://www.a2zwebhelp.com/images/slider/img5.jpg"/></li>
                  <li><img class="imageClass" src="http://www.a2zwebhelp.com/images/slider/img6.jpg"/></li>
             </ul>
</div>
</body>
</html>
Ответить с цитированием