Stylize dots of a slide

Question

Stylize dots of a slide

Navigation

#1 by (1 votes)

1

I'm about to develop this screen with html and css and I needed to know if it's possible to create a slide with these dots or if it's done in another way the idea is to click on these links and it changes the background image would be a slide let's say so I thought about using this slide here plus the challenge would be to stylize these dots

Follow my code: html:

<div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide slide-wonder-woman">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-8">
                            <h1 class="title">wonder<br><span>Woman</span></h1>
                        </div>
                        <div class="-wonder-woman"></div>  
                    </div>
                </div>
            </div>
            <div class="swiper-slide slide-superman">Slide 2</div>
            <div class="swiper-slide slide-batman">Slide 3</div>
            <div class="swiper-slide slide-aquaman">Slide 4</div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div>

CSS:

    .swiper-container {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;


        .swiper-slide {
          text-align: center;
          font-size: 18px;
          background: #fff;
          /* Center slide text vertically */
          display: -webkit-box;
          display: -ms-flexbox;
          display: -webkit-flex;
          display: flex;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          -webkit-justify-content: center;
          justify-content: center;
          -webkit-box-align: center;
          -ms-flex-align: center;
          -webkit-align-items: center;
          align-items: center;
        }

        .slide-wonder-woman{
          background-image: url("../images/bg-slide-wonder-woman.jpg");
          background-size: cover;
          background-repeat: no-repeat;

          .title{
            position: relative;
            color: $white;
            font-family: 'gotham-book';
            text-transform: uppercase;
            letter-spacing: 45px;
            text-align: center;
            line-height: 90px;
            font-size: 3.5em;
            z-index: 1;
            &:after{
              content: '';
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              margin: 0 auto;
              background-image: url("../images/wonder-woman-logo.png");
              width: 496px;
              height: 212px;
              z-index: -1;
            }

            span{
              font-family: 'gotham-ultra';
              letter-spacing: normal;
              font-size: 2.5em;
            }
          }

          .-wonder-woman{
            background-image: url("../images/wonder-woman.png");
            width: 1000px;
            height: 100vh;
            position: absolute;
            top: 0;
            right: 0;
            z-index: 1;
          }
        }

.swiper-container-vertical>.swiper-pagination-bullets{
      left: 40px!important;
      right: auto;  
  }

  .swiper-pagination-bullet {
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    font-size: 12px;
    color: #000;
    opacity: 1;
    background: rgba(0, 0, 0, 0.2);
  }

  .swiper-pagination-bullet-active {
    color: #fff;
    background: #007aff;
  }

JS:

var swiper = new Swiper('.swiper-container', {
    direction: 'vertical',
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
        renderBullet: function (index, className) {
            return '<span class="' + className + '">' + (index + 1) + '</span>';
        },
    },
});

html5 css3 slide

asked by anonymous 03.01.2019 / 13:31

1 answer

Android development profile (Profile) How to generate TRemotable Class with XML Bind?

score 1 · Accepted Answer

There is a template, and I'll let you know CSS is to be used rss, because it has a way that you can disagree with some things, such as putting text with content of ::after ...

Then each span dot is a nth-child , so you can make a span:nth-child(n)::after to place texts individually in the content="texto" of each "dot"

Apart from that the rest is all basic CSS, minus the line below the item ativo , which is a background linear-gradient that gets shifted with background-position off the screen, and when active it does transition into screen.

Followthecodefortheimageabove.Takeadvantageofenablingscrollwithwheelmouseandplaceanimageandtexttogetclosertotheexample.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Swiper demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

  <!-- Link Swiper's CSS -->
  <!-- <link rel="stylesheet" href="../dist/css/swiper.min.css"> -->
  <link rel="stylesheet" href="http://idangero.us/swiper/dist/css/swiper.min.css">

  <!-- Demo styles -->
  <style>
    html, body {
      position: relative;
      height: 100%;
    }
    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color:#000;
      margin: 0;
      padding: 0;
    }
    .swiper-container {
      width: 100%;
      height: 100%;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
      flex-direction: column;
      box-sizing: border-box;
      padding-right: 50px;
      padding-left: 190px;
    }
    .swiper-pagination-bullet {
      color:#000;
      opacity: 1;

      font-size: 20px;
      font-weight: bold;
      background-color: transparent;
      border-radius: 0;
      width: 140px;
      height: 60px;
      text-align: left;
      padding: 8px;
      box-sizing: border-box;
      position: relative;
      background-repeat: no-repeat;
      background-position: -160px 0;
      background-image: linear-gradient(to bottom, transparent 58px, transparent 58px);
      transition: 300ms;
    }
    .swiper-pagination-bullet-active {
      background-image: linear-gradient(to bottom, transparent 58px, red 58px);
      background-position: 0 0px;
      color: red;
    }

.swiper-pagination-bullet::before {
  content: "0";
}
    .swiper-container-vertical>.swiper-pagination-bullets {
      right: auto;
      left: 0px;
    }
    .swiper-pagination-bullet::after {
      content: "";
      position: absolute;
      bottom: 8px;
      left: 8px;
      font-size: 14px;
      font-weight: normal;
    }
    .swiper-pagination-bullet:nth-child(1)::after {
      content: "123";
    }
    .swiper-pagination-bullet:nth-child(2)::after {
      content: "texto";
    }
    .swiper-pagination-bullet:hover {
      background-color: rgba(0,0,0,0.2);
    }
  </style>
</head>
<body>
  <!-- Swiper -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="https://unsplash.it/100/100"alt="" style="width:100%; height:100%; object-fit:cover; position: absolute; top: 0; left: 0; z-index: -1;">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae minima, asperiores eius saepe eaque incidunt antatis eum fugit.
        <a href="#">MEU LINK</a>
      </div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
  </div>

  <!-- Swiper JS -->
  <!-- <script src="../dist/js/swiper.min.js"></script> -->

  <script src="http://idangero.us/swiper/dist/js/swiper.min.js"></script><!--InitializeSwiper--><script>varswiper=newSwiper('.swiper-container',{direction:'vertical',pagination:{el:'.swiper-pagination',clickable:true,renderBullet:function(index,className){return'<spanclass="' + className + '">' + (index + 1) + '</span>';
        },
      },
      mousewheel: {
        invert: false,
      },
    });
  </script>
</body>
</html>

OBS: No more CSS can be more refined, but I'll leave it to you. If you want to leave it even more responsive you can go changing the measures from px to% with% use % and REM etc, but tb I'll leave it to you ...