>source

내 웹사이트에 농구팀 일정을 보여주는 멋진 회전목마가 있습니다. 슬라이더에는 현재 시즌의 모든 게임이 날짜별로 정렬되어 있습니다.

슬라이더가 다음 게임의 중앙에 오도록 하고 싶습니다. HTML의 첫 번째 슬라이드가 아닌데도 특정 슬라이드를 첫 번째 슬라이드로 설정하는 방법은 무엇입니까?

code:

$('.result_slider').slick({
    rtl: true,
    centerPadding: '0px',
    slidesToShow: 6,
    responsive: [
        {
            breakpoint: 1680,
            settings: {
            arrows: false,
            centerPadding: '0px',
            slidesToShow: 3
          }
        },
        {
          breakpoint: 481,
          settings: {
            arrows: false,
            centerPadding: '0px',
            slidesToShow: 1
          }
        }
    ]
});

  • 답변 # 1

    내장 방법을 사용할 수 있습니다.

    this.slider.slickGoTo(0);
    

    -반응용 또한 이 슬라이더를 이와 같은 속성으로 활용하십시오.

    <Slider ref={slider=> (this.slider= slider)} { ...sliderSettings }>   { categories.map(((t)=> this.renderCategory(t.path, t.image, t.name)))
       }
    </Slider>

  • 답변 # 2

    게임 날짜를 PHP 또는 JavaScript 변수에 할당하면 현재 날짜와 비교하고 "initialSlide" 호출에 해당 변수를 배치할 수 있습니다.

    아래의 예는 요일을 기준으로 하지만 개념은 여전히 ​​동일합니다. 월요일부터 토요일까지 일주일에 6일 바에서 특별 행사를 하는 고객이 있습니다. 따라서 아래 스크립트를 사용하면 현재 요일이 "중앙"이 됩니다.

    요일 대신 날짜와 일치하도록 이 작업을 수행할 수도 있습니다.

    jQuery(document).ready(function(){
        var d= new Date();
        var day= d.getDay();
        var slide;
        if (day== 1) {
            slide= 0;
        }else if (day== 2) {
            slide= 1;
        }else if (day== 3) {
            slide= 2;
        }else if (day== 4) {
            slide= 3;
        }else if (day== 5) {
            slide= 4;
        }else if (day== 6) {
            slide= 5;
        }else{
            slide= 0;
        }
        $('.specials').slick({
          centerMode: true,
          centerPadding: '40px',
          adaptiveHeight: true,
          slidesToShow: 3,
          initialSlide: slide,
          responsive: [
            {
              breakpoint: 768,
              settings: {
                arrows: false,
                centerMode: true,
                centerPadding: '40px',
                slidesToShow: 3
              }
            },
            {
              breakpoint: 480,
              settings: {
                arrows: false,
                centerMode: true,
                centerPadding: '40px',
                slidesToShow: 1
              }
            }
          ]
        });
    });
    

    다음은 PHP를 사용한 예입니다.

    <?php
    //Get current Date/Time
    date_default_timezone_set('America/Los_Angeles');
    $date= new DateTime();
    //Set day variable global for initial slide
    global $day;
    //$date->format('l') -this gets the "Day" of the week by name.
    //if current day of the week matches either set days of the week, then match that slide as the initialSlide.
    if ($date->format('l')== "Monday"){
        $day= "0";//slide 0
    }else if ($date->format('l')== "Tuesday"){
        $day= "1";//slide 1
    }else if ($date->format('l')== "Wednesday"){
        $day= "2";//slide 2
    }else if ($date->format('l')== "Thursday"){
        $day= "3";//slide 3
    }else if ($date->format('l')== "Friday"){
        $day= "4";//slide 4
    }else if ($date->format('l')== "Saturday"){
        $day= "5";//slide 5
    }else{
        $day= "0";//slide 0
    }
    ?>jQuery(document).ready(function(){
        $('.specials').slick({
          centerMode: true,
          centerPadding: '40px',
          adaptiveHeight: true,
          slidesToShow: 3,
          initialSlide: <?php echo $day; ?>,
          responsive: [
            {
              breakpoint: 768,
              settings: {
                arrows: false,
                centerMode: true,
                centerPadding: '40px',
                slidesToShow: 3
              }
            },
            {
              breakpoint: 480,
              settings: {
                arrows: false,
                centerMode: true,
                centerPadding: '40px',
                slidesToShow: 1
              }
            }
          ]
        });
    });
    

  • 답변 # 3

    다음을 사용할 수 있습니다.이니셜슬라이드그에 대한. 첫 번째 슬라이드의 숫자는 0이므로 슬라이더를 두 번째 슬라이드에서 시작하려면 다음을 설정합니다.초기슬라이드: 1.

    여기 내 최소한의 예슬라이더는 세 번째 슬라이드에서 시작됩니다.

  • 이전 flutter : 플러터의 반짝이는 애니메이션
  • 다음 html : 줄의 일부 텍스트 옆에 있는 가 정렬되지 않습니까?