Styling Slides from a slide

Asked

Viewed 366 times

1

Talks personally I’m about to develop this screen with html and css and I needed to know if it is possible to create a slide with these Dots or to do otherwise the idea is to click on these links and he change the background image would be a slide let’s say so I thought to use this slide here the more the same challenge would be styling these Dots

You 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
  • 1

    Face is perfectly possible, but I suggest you save the question for when you already have your code more developed, or at least you already have part of the code running so we can at least simulate your problem here... Look here http://prntscr.com/m2jzkr by the same Devtools has already started to style something in less than 2 minutes

  • @hugocsl oloko as you did ? each dot would have to have a different style follows more calmly I’ll code

  • 1

    This Dot is actually a span Just put the text inside that Span. If this Span is generated automatically (I believe it is), then it is a little more difficult to style everything... but it is not impossible... it has to do with code running locally and with a real example, so I told you to develop more things before asking..., it is just a hint ;)

  • 1

    @hugocsl I edited the question and added the code I think it is now in the format that commented can help me from here ?

  • @hugocsl has as?

  • 1

    Yes, I’ve already moved here... it’s not very complex... but you have to have some technique with CSS, mainly to put the text in span that is generated dynamically... But virtually no need for JS, I did everything with CSS :D now is hope to reopen....

  • @hugocsl cool face will it take to reopen ? is that all that is missing you can not answer now ?

  • That time I was at lunch :D, it worked with the code there?

Show 3 more comments

1 answer

1


Follows a model, and I’m warning CSS is to be used rss, because there is a way that can disagree with some things, as for example put the text content of ::after...

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

Other than that the rest is all basic CSS, except the line below the item ativo, which is a background linear-gradient that gets displaced with background-position out of the screen, and when active does the transition into the screen.

inserir a descrição da imagem aqui

Follow the code referring to the image above. Take the opportunity to enable the scroll with the wheelmouse and place an image and text to be closer to the example. 

<!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>
  <!-- Initialize Swiper -->
  <script>
    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>';
        },
      },
      mousewheel: {
        invert: false,
      },
    });
  </script>
</body>
</html>

OBS: Plus the CSS can still be more refined, but then I’ll leave it to you. If you want to leave even more Responsive vc can go changing the measures of px for % use REM and EM etc, but I’ll leave that to you too...

  • 1

    guy you are a god in css hahahah guy as I insert a 0 in front of the numbers please

  • 1

    @Kirito puts this in css .swiper-pagination-bullet::before {&#xA; content: "0";&#xA;} will look perfect! If you want to do it right in JS the rule is here return '<span class="' + className + '">' + (index + 1) + '</span>'; but I don’t know anything about JS, with CSS it was great, but if you really want with JS you’ll have to ask for help from someone who knows about JS rss. And even in JS have to remember that 0 only goes until 09, in 10 the rule has to stop applying, da para corrigir isso com Nth-Child, mas um slider de mais de 10 item não é legal de qq forma...

  • i added that before nothing else happened just miss that and ends

  • @Kirito guy I edited the code here of the same answer and put this CSS... look how well it worked. Just you run the code to see that now has a 0 in front of the numbers

Browser other questions tagged html5 css3 slide

You are not signed in. Login or sign up in order to post.