Jquery, Css Moving between week days with previous next buttons - Carousel

问题

I have the screenshot https://imgur.com/GbNuHg0 for days of week, I want to show only 4 days and use prev-next btn to move between them, I'm very new to css so please help me in how to do it I need to show Only 4 days and then move forward by next or prev btn to see the next or previous day so it should animate slowly so if you check class move and increase or decrease the value of translate it will works but how to do it by only CSS

I tried with jquery and it is moved it just one time

  $(".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:

Well, it's doable without JS - but you'll end up having a big repetitive complicated unmaintainable CSS file and you'll not have the flexibility in the number of elements / days you'll want to eventually populate that parent with.

Create your layout using CSS flex
Always use type="button" for your <button> elements, otherwise they will be type Submit by default
Create an .each() function - so that you can have multiple Day Pickers on the same page (or rather explore how to create a jQuery plugin)
Calculate the number of days using JS, and calculate how many are visible doing some widths division
Create a c (counter) variable and use it to animate in % to a negative value; like i.e: say c is 2 therefore: -(100/4) * 2 will equal to -50% left animation.
make sure to increment,decrement that c variable, but also don't forget to reset the value to 0 or to the max steps.
Use CSS transition and tranform: translateX to animate the element

Here's a simplified quick example with the minimal markup you can easily add to your code with smaller modifications:

$(".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>

来源：https://stackoverflow.com/questions/62843777/jquery-css-moving-between-week-days-with-previous-next-buttons-carousel

标签

jquery

css