Forums

Kuzyo

Have some problem with slider, I can't understand which variant of script is better for me? Now I use this one

$(window).ready(function () { $('div.sliderGallery').each(function () { var ul = $('ul', this); var productWidth = ul.innerWidth() - $(this).outerWidth(); var slider = $('.slider', this).slider({ handle: '.handle', minValue: 0, maxValue: productWidth, slide: function (ev, ui) { ul.css('left', '-' + ui.value + 'px'); }, stop: function (ev, ui) { ul.animate({ 'left' : '-' + ui.value + 'px' }, 500, 'linear'); } }); }); });

Here instruction http://jqueryfordesigners.com/slider-gallery/ Now the slider looks fine for me, but doesn't roll slides. Thanks for help

JamesMD

Are you linking all these files as the tutorial has highlighted? I haven't really look in to it in detail, the jQuery seems fine to me.

<script src="jquery.js" type="text/javascript"></script>
  
<script src="jquery.dimensions.js" type="text/javascript"></script>
<script src="ui.mouse.js" type="text/javascript"></script>
<script src="ui.slider.js" type="text/javascript"></script>

Kuzyo

Here all my head

main

  <link rel="stylesheet" type="text/css" href="css/main.css" media="all">

  <script type='text/javascript' src="js/jquery-1.8.3.min.js"></script>
  <!---- спливаюче меню----->
  <script type="text/javascript" charset="utf-8">
      $(function(){
          $('.services,.submenu-1,.portfolio, .threeD-objects').hover (function (){
              $(this).children('ul').stop(false,true).fadeIn (100);
          },function (){
              $(this).children('ul').stop(false,true).fadeOut (100);
          });
      });
  </script>
  <!-----головний слайдер---->
  <script type='text/javascript' src="js/jquery.slides.min.js"></script>
  <script type='text/javascript'>
      $(function(){
          $("#slides").slidesjs();
      });
  </script>
  <!----слайдер клієнтів------>
  <script src="js/jquery.dimensions.js" type="text/javascript"></script>
  <script src="js/ui.mouse.js" type="text/javascript"></script>
  <script src="js/ui.slider.js" type="text/javascript"></script>
  <script type="text/javascript">
      $(window).ready(function () {
          $('div.sliderGallery').each(function () {
              var ul = $('ul', this);
              var productWidth = ul.innerWidth() - $(this).outerWidth();

              var slider = $('.slider', this).slider({
                  handle: '.handle',
                  minValue: 0,
                  maxValue: productWidth,
                  slide: function (ev, ui) {
                      ul.css('left', '-' + ui.value + 'px');
                  },
                  stop: function (ev, ui) {
                      ul.animate({ 'left' : '-' + ui.value + 'px' }, 500, 'linear');
                  }
              });
          });
      });
  </script>

treehouse : what would you like to learn today?

Forums

Help with slider