'My carousel does not work properly on IOS
I would like to take back this code: https://codepen.io/kellyex/pen/JjoYpEx
The problem is that I don't understand how and why the first card only is draggable on IOS (while everything works on Android).
On IOS, everything works fine but only on the Codepen editor, not elsewhere.
Can you help me? Thank you!
HTML :
<main>
<section class="slider-section">
<h1 class="title">Many Items</h2>
<div class="slider-container">
<ol class="cards slider">
<li class="card-outter slider-item js-slider-item">
<div class="card">
<a href="#">
<img src="https://unsplash.it/210/100">
<h2 class="title">Item 1</h2>
<p class="description">Item description</p>
</a>
</div>
</li>
<li class="card-outter slider-item js-slider-item">
<div class="card">
<a>
<img src="https://unsplash.it/210/100">
<h2 class="title">Item 2</h2>
<p class="description">Item description</p>
</a>
</div>
</li>
<li class="card-outter slider-item js-slider-item">
<div class="card">
<a href="#">
<img src="https://unsplash.it/210/100">
<h2 class="title">Item 3</h2>
<p class="description">Item description</p>
</a>
</div>
</li>
<li class="card-outter slider-item js-slider-item">
<div class="card">
<a>
<img src="https://unsplash.it/210/100">
<h2 class="title">Item 4</h2>
<p class="description">Item description</p>
</a>
</div>
</li>
<li class="card-outter slider-item js-slider-item">
<div class="card">
<a href="#">
<img src="https://unsplash.it/210/100">
<h2 class="title">Item 5</h2>
<p class="description">Item description</p>
</a>
</div>
</li>
<li class="card-outter slider-item js-slider-item">
<div class="card">
<a>
<img src="https://unsplash.it/210/100">
<h2 class="title">Item 6</h2>
<p class="description">Item description</p>
</a>
</div>
</li>
<li class="card-outter slider-item js-slider-item">
<div class="card">
<a href="#">
<img src="https://unsplash.it/210/100">
<h2 class="title">Item 7</h2>
<p class="description">Item description</p>
</a>
</div>
</li>
<li class="card-outter slider-item js-slider-item">
<div class="card">
<a>
<img src="https://unsplash.it/210/100">
<h2 class="title">Item 8</h2>
<p class="description">Item description</p>
</a>
</div>
</li>
<li class="card-outter slider-item js-slider-item">
<div class="card">
<a href="#">
<img src="https://unsplash.it/210/100">
<h2 class="title">Item 9</h2>
<p class="description">Item description</p>
</a>
</div>
</li>
<li class="card-outter slider-item js-slider-item">
<div class="card">
<a>
<img src="https://unsplash.it/210/100">
<h2 class="title">Item 10</h2>
<p class="description">Item description</p>
</a>
</div>
</li>
<li class="card-outter slider-item js-slider-item">
<div class="card">
<a>
<img src="https://unsplash.it/210/100">
<h2 class="title">Item 11</h2>
<p class="description">Item description</p>
</a>
</div>
</li>
<li class="card-outter slider-item js-slider-item">
<div class="card">
<a>
<img src="https://unsplash.it/210/100">
<h2 class="title">Item 12</h2>
<p class="description">Item description</p>
</a>
</div>
</li>
<li class="card-outter slider-item js-slider-item">
<div class="card">
<a>
<img src="https://unsplash.it/210/100">
<h2 class="title">Item 13</h2>
<p class="description">Item description</p>
</a>
</div>
</li>
<li class="card-outter slider-item js-slider-item">
<div class="card">
<a>
<img src="https://unsplash.it/210/100">
<h2 class="title">Item 14</h2>
<p class="description">Item description</p>
</a>
</div>
</li>
<li class="card-outter slider-item js-slider-item">
<div class="card">
<a>
<img src="https://unsplash.it/210/100">
<h2 class="title">Item 15</h2>
<p class="description">Item description</p>
</a>
</div>
</li>
<li class="card-outter slider-item js-slider-item">
<div class="card">
<a>
<img src="https://unsplash.it/210/100">
<h2 class="title">Item 16</h2>
<p class="description">Item description</p>
</a>
</div>
</li>
</ol>
<div class="slider-indicator-bar js-slider-indicator-bar">
<div class="slider-indicator js-slider-indicator"></div>
</div>
<span class="js-slider-arrow slider-arrow left disabled"></span>
<span class="js-slider-arrow slider-arrow right"></span>
</div>
</section>
<section class="slider-section">
<h1 class="title">Fewer Items</h2>
<div class="slider-container">
<ol class="cards slider">
<li class="card-outter slider-item js-slider-item">
<div class="card">
<a href="#">
<img src="https://unsplash.it/210/100">
<h2 class="title">Item 1</h2>
<p class="description">Item description</p>
</a>
</div>
</li>
<li class="card-outter slider-item js-slider-item">
<div class="card">
<a>
<img src="https://unsplash.it/210/100">
<h2 class="title">Item 2</h2>
<p class="description">Item description</p>
</a>
</div>
</li>
<li class="card-outter slider-item js-slider-item">
<div class="card">
<a href="#">
<img src="https://unsplash.it/210/100">
<h2 class="title">Item 3</h2>
<p class="description">Item description</p>
</a>
</div>
</li>
<li class="card-outter slider-item js-slider-item">
<div class="card">
<a>
<img src="https://unsplash.it/210/100">
<h2 class="title">Item 4</h2>
<p class="description">Item description</p>
</a>
</div>
</li>
<li class="card-outter slider-item js-slider-item">
<div class="card">
<a href="#">
<img src="https://unsplash.it/210/100">
<h2 class="title">Item 5</h2>
<p class="description">Item description</p>
</a>
</div>
</li>
<li class="card-outter slider-item js-slider-item">
<div class="card">
<a>
<img src="https://unsplash.it/210/100">
<h2 class="title">Item 6</h2>
<p class="description">Item description</p>
</a>
</div>
</li>
<li class="card-outter slider-item js-slider-item">
<div class="card">
<a href="#">
<img src="https://unsplash.it/210/100">
<h2 class="title">Item 7</h2>
<p class="description">Item description</p>
</a>
</div>
</li>
<li class="card-outter slider-item js-slider-item">
<div class="card">
<a>
<img src="https://unsplash.it/210/100">
<h2 class="title">Item 8</h2>
<p class="description">Item description</p>
</a>
</div>
</li>
</ol>
<div class="slider-indicator-bar js-slider-indicator-bar">
<div class="slider-indicator js-slider-indicator"></div>
</div>
<span class="js-slider-arrow slider-arrow left disabled"></span>
<span class="js-slider-arrow slider-arrow right"></span>
</div>
</section>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|