Форум

Artem_A · #1 (**permalink**) 20.01.2016, 23:30

Здравствуйте, есть такой код. Не могу сделать так, чтобы слайдер запускался только когда я нажимаю на ссылку.

Ссылка - якорь, т.е я хочу чтобы совершался переход, а потом включался слайдер, а не автоматически при заходе на страницу.

$(document).ready(function(){
  $('#ar').click(function(){
    $('#apple_slider').cycle({
    fx:      'scrollLeft',
    speed:    2000,
    timeout:  2000
  }).toggle("normal");
  });
});

рони · #2 (**permalink**) 21.01.2016, 00:37

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%;
}
#ar{
  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 effects = "blindX,blindY,blindZ,cover,curtainX,curtainY,fade,fadeZoom,growX,growY,none,scrollUp,\
scrollDown,scrollLeft,scrollRight,scrollHorz,scrollVert,shuffle,slideX,slideY,toss,\
turnUp,turnDown,turnLeft,turnRight,uncover,wipe,zoom".split(',');
var len = Math.floor(Math.random()*effects.length)
var slider = $('.slider').cycle({
            fx: effects[len],
            speed: 'slow',
            timeout: 1000
        }).cycle('pause');

$('a').on({click : function(event) {
event.preventDefault();
var id = $(this).attr('href')
$(id).scrollTo(1000, 'swing',function() {
   $('.slider').cycle('resume')
})
}})
});



</script>
</head>
<body>
<a href="#ar">go</a>
<div class="wrapper" id="ar">

             <ul class="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>

Artem_A · #3 (**permalink**) 21.01.2016, 00:40

рони,
Документацию не нашел, за макет сорри
я думал все намного проще)

Artem_A · #4 (**permalink**) 21.01.2016, 00:42

рони,
Я еще не разбираюсь просто совсем, потому код почти как иероглифы

рони · #5 (**permalink**) 21.01.2016, 00:44

Artem_A,
http://jquerylist.ru/image-viewer/cycle.html
http://malsup.com/jquery/cycle/options.html

новая версия
https://github.com/malsup/cycle2

Artem_A · #6 (**permalink**) 21.01.2016, 00:45

рони,

<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">
          <div id="apple_slider">
            <img src="./img/main/about_us/slider/1.png" class="picture_slider_size1" alt="">
            <img src="./img/main/about_us/slider/2.png" class="picture_slider_size2"alt="">
            <img src="./img/main/about_us/slider/3.png" class="picture_slider_size3" alt="">
          </div>
        </div>

Artem_A · #7 (**permalink**) 21.01.2016, 00:45

рони,
нужно просто чтобы именно от #ar скакал

рони · #8 (**permalink**) 21.01.2016, 01:04

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>

Artem_A · #9 (**permalink**) 21.01.2016, 01:39

рони,
Вы гений!!! Спасибо большое!!!
все работает как надо!

Форум

Справочник

Discord чат

Курсы javascript