Блог

Я изучал возможность использования coda-slider на веб-странице с гибким макетом. Проблема в том, что coda-slider, похоже, хочет фиксированную ширину. Попытка использовать проценты приводит к тому, что копия исчезает за краем панели.

Я нашел образец javascript, который был написан для выбора jpg на основе фактической ширины контейнера, и попытался модифицировать его, чтобы изменить значения ширины css для панели слайдера, но безуспешно. …. хорошо, теперь я заставил его работать с шириной.

Часть css coda-slider, которая управляет шириной панели:

 .coda-slider, .coda-slider .panel { width: 650px; }
  

Скрипт, который я нашел и модифицировал:

  $(document).ready(function() { 

 function imageresize() {  
   var availwidth = $("#leftside").width(); 
   var codawidth = availwidth - 50; 
      $(".coda-slider .panel").css({"width": codawidth   "px"});
      $(".coda-slider").css({"width":codawidth   "px"});
}    

imageresize(); //Triggers when document first loads      

$(window).bind("resize", function(){ //Adjusts image when browser resized
    imageresize();  
 });  
 }); 
  

Я устранил проблему с размером, используя размер контейнера, а не размер страницы… НО … coda-slider использует исходную фиксированную ширину для расстояния между слайдами, поэтому, как только вы начинаете сдвигать, каждая панель заканчивается смещением, которое увеличивается с каждым слайдом.

Есть предложения по изменению расстояния между слайдами в зависимости от ширины?

ХОРОШО, разбираемся….

Пришлось модифицировать js-файл coda-slider, заменив:

 var panelWidth = slider.find(".panel").width();
  

С той же формулой для ширины панели css:

 var panelWidth = $("#leftside").width() - 50;
  

Это позаботилось о расстоянии слайда.

Теперь мне просто нужно выяснить, как заставить coda-slider сбрасываться при изменении размера окна браузера. Это изменяет размер окна css, но не сбрасывает значение слайда. В долгосрочной перспективе изменение размера окна браузера не является большим требованием, но это было бы удобно, если бы пользователи меняли ориентацию своего планшета во время просмотра веб-сайта.

Это старое, но у меня была такая же проблема, и оказалось, что разработчик создал новый coda-slider, который может динамически подстраиваться под ширину.

это здесь: LiquidSlider

Я столкнулся с аналогичной проблемой при попытке настроить слайд-шоу coda с помощью Flowplayer Tools ‘scrollable’ — слайдера на основе пикселей — на моем сайте fluid layout.

Я решил эту проблему, изменив значения ползунка coda на%, а затем используя дополнительную строку jQuery, чтобы заставить панели элементов слайдера оставаться той же ширины, что и контейнер слайдера.

Вот настройка, которую я использую — % вместо пикселей для ширины. Я не устанавливаю никакой ширины на панелях слайдера; вместо этого им присваиваются значения с помощью jQuery:

 <style type="text/css">

    .slider  { width:100%; height:200px; overflow:hidden; position:relative }
    .items   { width:2000em; position:absolute }
    .item    { /* do not set any width */ height:200px; overflow:hidden;
             float:left; display:inline-block }

</style>


<div class="slider equal">
    <div class="items">

        <div class="item equal"></div>
        <div class="item equal"></div>
        <div class="item equal"></div>

    </div>
</div>
  

Этот jQuery предназначен для CSS-класса ‘equal’:

 // Set slider children to width of parent

if($("div.equal").length){
    $.fn.setAllToMaxWidth = function(){
        return this.width( Math.min.apply(this, $.map( this , function(e){ return $(e).width() }) ) );
    };

    $("div.equal").setAllToMaxWidth();
};
  

Этот обходной путь jQuery является адаптацией jQuery Equal Column Heights, разработанной Джейной Юэн.

Это означает, что макет слайдера отображается точно так, как я хочу, в pageload и соответствует моему макету сетки, независимо от ширины браузера.

Однако есть небольшая загвоздка — если вы измените размер окна вашего браузера после его загрузки, ваш макет может быть растянут за пределы ширины элементов слайдера и выглядит немного странно.