jquery слайдер с элементами переменной ширины

Question

возможно ли создать слайдер jquery, в котором элементы имеют переменную ширину (т. Е. Не все элементы имеют одинаковую ширину)?

Если это так, как мне это сделать?Hannit

Answer 1

Чтобы установить ширину слайдера jQuery, просто оберните его в div и стиль, используя CSS. Вы также можете ссылаться на дочерние элементы с помощью CSS, чтобы стилизовать их, но это должно быть сделано с помощью jQuery после их рендеринга.

Пример:

<script type="text/javascript">
   $(document).ready(function(){
      //render the sliders
      $(".oSlider").slider({
         value: 12,
         min: 8,
         max: 24,
         step: 1
      });
      //size each handle according to class
      $(".narrow-handle .ui-slider-handle").css("width","10px");
      $(".wide-handle .ui-slider-handle").css("width","50px");
   });
</script>
<style type="text/css">
   /* define a width for the sliders by styling the wrapping div */
   .oSliderContainer { width:100px; }
   .oSliderContainer2 { width:200px; }
</style>

<div class="oSliderContainer"><div class="oSlider narrow-handle"></div></div>
<div class="oSliderContainer2"><div class="oSlider wide-handle"></div></div>

Я надеюсь, что ответит на ваш вопрос, удачи!

Answer 2

Вы пробовали ползунок леммонов?

http://jquery.lemmonjuice.com/plugins/slider-variable-widths.php