I made this simple carousel:

.index {
  background-color: var(--color-blue);
}

.container {
  display: flex;
  overflow: auto;
  outline: 10px solid black;
  flex: none;
}

.container.x {
  width: 100%;
  flex-flow: row nowrap;
}

.x.mandatory-scroll-snapping {
  scroll-snap-type: x mandatory;
}

.container > div {
  text-align: center;
  scroll-snap-align: center;
  flex: none;
}

.carousel-card {
  width: 100vw;
  height: 30rem;
}

h1 {
  color: blue;
  
}

h2 {
  color: red;
}

h3 {
  color: green;
}

h1, h2, h3 {
  font-size: 10rem
}

<div >
        <div  dir="ltr">
          <div >
                    <h1>ONE<h1>
          </div>
                  <div >
                    <h2>TWO</h2>
          </div>
                  <div >
                    <h3>THREE</h3>
          </div>
        </div>
    </div>

I'd like to keep the horizontal scrolling (it's for mobile), but I'd like to add in a div some dots and highlight the active one.

Of course, without bootstrap, jquery or any other library (otherwise I would have already done it).

I tried to dig into this, but I can't find my answer:

https://developer.mozilla.org/en-US/docs/Web/CSS/:target

Thanks to you for your help :) !

CodePudding user response：

You don't even need the target you can simply just anchor to the divs inside the carousel.

.index {
  background-color: var(--color-blue);
}

.container {
  display: flex;
  overflow: auto;
  outline: 10px solid black;
  flex: none;
}

.container.x {
  width: 100%;
  flex-flow: row nowrap;
}

.x.mandatory-scroll-snapping {
  scroll-snap-type: x mandatory;
}

.container > div {
  text-align: center;
  scroll-snap-align: center;
  flex: none;
}

.carousel-card {
  width: 100vw;
  height: 30rem;
}

h1 {
  color: blue;
}

h2 {
  color: red;
}

h3 {
  color: green;
}

h1, h2, h3 {
  font-size: 10rem
}

<div >
  <div  dir="ltr">
          <div id="cardOne" >
                    <h1>ONE</h1>
          </div>
                  <div id="cardTwo" >
                    <h2>TWO</h2>
          </div>
                  <div id="cardThree" >
                    <h3>THREE</h3>
          </div>
  </div>
</div>

<ul>
<li><a href="#cardOne">One</a></li>
<li><a href="#cardTwo">Two</a></li>
<li><a href="#cardThree">Three</a></li>
</ul>

CodePudding user response：

I took everything a step further and added the dots (using Font Awesome), along with an active state. I've removed the scrollbar and set the scroll-behavior to smooth as well. Your scroll-snap works just fine, too.

Let me know if there needs to be more changes.

let activeDots = document.querySelectorAll('.dot');

activeDots.forEach(activeDot => {
  activeDot.addEventListener('click', e => {
    document.querySelector('.dot.active').classList.remove('active');
    e.target.classList.add('active');
  });
});

::-webkit-scrollbar {
  display: none;
}

html {
  scroll-behavior: smooth;
}

ul {
  list-style: none;
}

.dots-container {
  display: flex;
  justify-content: center;
}

ul.dots {
  display: flex;
}

.dots li li {
  margin-left: .5rem;
}

.active {
  color: yellow;
}

.index {
  background-color: var(--color-blue);
  height: 85vh;
}

.container {
  display: flex;
  overflow: auto;
  flex: none;
}

.container.x {
  width: 100%;
  flex-flow: row nowrap;
}

.x.mandatory-scroll-snapping {
  scroll-snap-type: x mandatory;
}

.container>div {
  text-align: center;
  scroll-snap-align: center;
  flex: none;
}

.carousel-card {
  width: 100vw;
  height: 23rem;
}

h1 {
  color: blue;
}

h2 {
  color: red;
}

h3 {
  color: green;
}

h1,
h2,
h3 {
  font-size: 10rem
}

.dot::before {
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

.dot::before {
  font: var(--fa-font-solid);
  content: "\f111";
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">

<div >
  <div  dir="ltr">
    <div id="cardOne" >
      <h1>ONE</h1>
    </div>
    <div id="cardTwo" >
      <h2>TWO</h2>
    </div>
    <div id="cardThree" >
      <h3>THREE</h3>
    </div>
  </div>
  <div >
    <ul >
      <li>
        <a  href="#cardOne"></a>
      </li>
      <li>
        <a  href="#cardTwo"></a>
      </li>
      <li>
        <a  href="#cardThree"></a>
      </li>
    </ul>
  </div>
</div>