Jquery, Css Переход между днями недели с помощью кнопок «предыдущий следующий» - Карусель - PullRequest
Новая
       1

Jquery, Css Переход между днями недели с помощью кнопок «предыдущий следующий» - Карусель

1 голос
/ 11 июля 2020

У меня есть скриншот https://imgur.com/GbNuHg0 для дней недели, я хочу показать только 4 дня и использовать prev-next btn для перемещения между ними, я новичок в css, поэтому, пожалуйста Помогите мне, как это сделать, мне нужно показать только 4 дня, а затем перейти к следующему или предыдущему btn, чтобы увидеть следующий или предыдущий день, поэтому он должен медленно анимироваться, поэтому, если вы проверяете перемещение класса и увеличиваете или уменьшаете значение перевода будет работать, но как это сделать только CSS

Я пробовал с jquery, и он перемещается только один раз 

  $(".next").on("click", function (e) {
    e.preventDefault();
   $('.move').css('transform', 'translate( -30px)');
   });

     $(".prev").on("click", function (e) {
    e.preventDefault();
      
   $('.move').css('transform', 'translate( 30px)');

   });

<div class="day-picker-container">
    <div class="day-picker slidable">
        <div class="day-picker-holder">
            <ul class="move" style="transform: translateX(0px);">
                @foreach($calender_days as $key => $calender_day)

                <li>
                    <label class="button-toggle-wrapper">
                        <input type="radio" value="" name="day-picker" />
                        <span class="day-value button-toggle">{{$calender_day['day_text']}} <span class="day-number">{{(int)$calender_day['day_date']}}</span></span>
                    </label>
                </li>
                @endforeach
            </ul>
        </div>
        <button class="nav-scroller prev hide">
            <svg width="12" height="14" xmlns="http://www.w3.org/2000/svg">
                <path class="svg-stroke-container" stroke-linejoin="round" stroke-linecap="round" fill-rule="evenodd" fill="none" stroke="#D70F64" d="m3.5,1.5l5,5.5l-5,5.5"></path>
            </svg>
        </button>
        <button class="nav-scroller next hide">
            <svg width="12" height="14" xmlns="http://www.w3.org/2000/svg">
                <path class="svg-stroke-container" stroke-linejoin="round" stroke-linecap="round" fill-rule="evenodd" fill="none" stroke="#D70F64" d="m3.5,1.5l5,5.5l-5,5.5"></path>
            </svg>
        </button>
    </div>
</div>

1 Ответ

0 голосов
/ 11 июля 2020

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

  • Создайте свой макет, используя CSS flex
  • Всегда используйте type="button" для ваших <button> элементов, иначе они будут типа Submit по умолчанию
  • Создайте функцию .each() - чтобы вы могли иметь несколько Day Pickers на одной странице (или, точнее, изучить, как создать jQuery плагин )
  • Вычислите количество дней, используя JS, и вычислите сколько видимых сделав некоторое деление ширины
  • Создайте c ( counter ) и используйте ее для анимации % до отрицательного значения; например: скажем, c равно 2, поэтому: -(100/4) * 2 будет равно -50% левой анимации.
  • обязательно увеличивайте, уменьшайте эту c переменную, но также не забудьте сбросьте значение на 0 или на максимальное количество шагов.
  • Используйте CSS transition и tranform: translateX для анимации элемента

Вот упрощенный быстрый пример с минимальная разметка, которую вы можете легко добавить в свой код с небольшими изменениями: 

$(".day-picker").each(function() {

  const $week = $(".day-picker-week", this);
  const $days = $(".day-value", this);
  const $prev = $(".prev", this);
  const $next = $(".next", this);

  const visible = Math.floor($week.width() / $days.outerWidth(true));
  const perc = 100 / visible;
  const tot = $days.length;
  const steps = tot - visible;
  let c = 0;
  
  const anim = () => {
    $week.css({transform: `translateX(${-perc*c}%)`});
  }
  
  $prev.on("click", function() {
    c -= 1;
    if (c < 0) c = steps;
    anim();
  });
  
  $next.on("click", function() {
    c += 1;
    if (c > steps) c = 0;
    anim();
  });

});
/* QuickReset */

* {
  margin: 0;
  box-sizing: border-box;
}

body {
  font: 14px/1.4 sans-serif;
}

/* DayPicker */

.day-picker {

  --day-width: 70px;
  --day-spacing: 5px;
  --days-visible: 4;

  display: inline-flex;
}

.day-picker-overflow {
  overflow: hidden;
  width: calc(var(--day-width) * var(--days-visible) + var(--day-spacing) * var(--days-visible) * 2 );
}

.day-picker-week {
  list-style: none;
  display: flex;
  padding: 0;
  transition: transform 0.4s;
}

[name="day-picker"] { /* Hide radio buttons */
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  clip: rect(1px, 1px, 1px, 1px);
}

.day-value {
  display: block;
  color: #d85c54;
  cursor: pointer;
  user-select: none;
  margin: 0 var(--day-spacing);
  width: var(--day-width);
  text-align: center;
  padding: 20px 0;
  box-shadow: inset 0 0 0 1px currentColor;
  transition: 0.3s;
}

[name="day-picker"]:checked ~ .day-value {
  color: #000;
  font-weight: bold;
  box-shadow: inset 0 0 0 2px currentColor;
}

.day-number {
  display: block;
}

.day-picker-nav {
  cursor: pointer;
  display: block;
  min-height: 100%;
  border: 0;
  background: transparent;
}
<div class="day-picker">

  <button type="button" class="day-picker-nav prev">
    <svg width="12" height="14" xmlns="http://www.w3.org/2000/svg" transform='rotate(180)'>
      <path class="svg-stroke-container" stroke-linejoin="round" stroke-linecap="round" fill-rule="evenodd" fill="none" stroke="#D70F64" d="m3.5,1.5l5,5.5l-5,5.5"></path>
    </svg>
  </button>

  <div class="day-picker-overflow">
    <ul class="day-picker-week">
      <li>
        <label class="day-picker-day">
          <input type="radio" value="" name="day-picker" />
          <span class="day-value">SAT<span class="day-number">11</span></span>
        </label>
      </li>
      <li>
        <label class="day-picker-day">
          <input type="radio" value="" name="day-picker" />
          <span class="day-value">SUN<span class="day-number">12</span></span>
        </label>
      </li>
      <li>
        <label class="day-picker-day">
          <input type="radio" value="" name="day-picker" />
          <span class="day-value">MON<span class="day-number">13</span></span>
        </label>
      </li>
      <li>
        <label class="day-picker-day">
          <input type="radio" value="" name="day-picker" />
          <span class="day-value">TUE<span class="day-number">14</span></span>
        </label>
      </li>
      <li>
        <label class="day-picker-day">
          <input type="radio" value="" name="day-picker" />
          <span class="day-value">WED <span class="day-number">15</span></span>
        </label>
      </li>
      <li>
        <label class="day-picker-day">
          <input type="radio" value="" name="day-picker" />
          <span class="day-value">THU <span class="day-number">16</span></span>
        </label>
      </li>
      <li>
        <label class="day-picker-day">
          <input type="radio" value="" name="day-picker" />
          <span class="day-value">FRI <span class="day-number">17</span></span>
        </label>
      </li>
    </ul>
  </div>

  <button type="button" class="day-picker-nav next">
    <svg width="12" height="14" xmlns="http://www.w3.org/2000/svg" transform='rotate(0)'>
      <path class="svg-stroke-container" stroke-linejoin="round" stroke-linecap="round" fill-rule="evenodd" fill="none" stroke="#D70F64" d="m3.5,1.5l5,5.5l-5,5.5"></path>
    </svg>
  </button>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...