CODEWITHSUNDEEP
htmlcss
Aditya
Aditya

Reputation: 2536

How to make slides on the pages using html and css

In the below html I want to introduce sliders, but I am unable to do that.I want to slide the slide-1 to the left so that slide-2 should be visible. How to achieve this?

Below is the example image: Here in the image forfet about the arrows, I need these 3 circles only.

enter image description here

<!DOCTYPE html>
<html>

<head>
<style>

.slide-1{
   font-family: "Quicksand";
}

.slide-2{
   font-family: "Quicksand";
}

</style>

</head>

<body>

<div>

<div class="slide-1">
  <p text-wrap>This is the slide 1 content</p>
</div>

<div class="slide-2">
<p text-wrap>This is slide 2 content.And this will only be visible when user touch and side to the left of slide-1.How is this possible?</p></div>

</div>

</body>
</html>

Upvotes: 0

Views: 970

Answers (2)

Roy Bogado
Roy Bogado

Reputation: 4472

Bootstrap:

https://getbootstrap.com/

Build responsive, mobile-first projects on the web with the world's most popular front-end component library.

Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.

Has a nice component called Carousel. https://getbootstrap.com/docs/4.1/components/carousel/
Here is an example:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img class="d-block w-100" src="https://content.nike.com/content/dam/one-nike/en_lu/SU16/Running/Free-xcat/Desktop/SU16_RN_NikeFree_InnovationHub_M_CDP_P1.jpg.transform/full-screen/SU16_RN_NikeFree_InnovationHub_M_CDP_P1.jpg" alt="First slide">
        </div>
        <div class="carousel-item">
          <img class="d-block w-100" src="https://www.pandasecurity.com/spain/mediacenter/src/uploads/2014/08/free.jpg" alt="Second slide">
        </div>
        <div class="carousel-item">
          <img class="d-block w-100" src="https://blog.bufferapp.com/wp-content/uploads/2014/05/6110974997_8b0dfa13a0_b.jpg" alt="Third slide">
        </div>
      </div>
      <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>

Upvotes: 1

javier ivan castellanos perez
javier ivan castellanos perez

Reputation: 21

Take this example, it contains the leagues of the script that you can use, in order to manipulate the rhythm of the transition, and you can play with the style 

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style>
* {
    margin: 0;
    padding: 0;
}
.main {

    width:50%;

    max-width: 1000px;
    margin:40px auto;
}
.slides {
    width:100%;
}

.slides img {
    width:70%;
    height:100%

}

.slidesjs-pagination {

    list-style:none;
    overflow:hidden;

}

.slidesjs-pagination li {
    float:left;
}

.slidesjs-pagination li a {
    border-radius: 100px;
    display:block;
    padding:10px 20px;
    color:rgba(220,220,220,0);
    text-decoration:none;
    background-color: rgba(220,220,220,0.6);

}

.slidesjs-pagination li a:hover {
    background:#000;
}

.slides .active {
    background-color: rgba(180,180,180,0.6);
    color: rgba(180,180,180,0);
}

.slidesjs-navigation{
    background-color: rgba(220,220,220,0.6);
    color:#000;
    text-decoration:none;
    display:inline-block;
    padding:13.6px 20px;
    float:right;
}

</style>
<body>

    <div class="main">
        <div class="slides">
            <img src="http://www.seguridad-maestro.tk/slideshow/1.jpg" alt="">
            <img src="http://www.seguridad-maestro.tk/slideshow/2.jpg" alt="">
            <img src="http://www.seguridad-maestro.tk/slideshow/3.jpg" alt="">
            <img src="http://www.seguridad-maestro.tk/slideshow/4.jpg" alt="">
        </div>
    </div>

    <script src="http://www.seguridad-maestro.tk/jquery-1.9.1.min.js"></script>
    <script src="http://www.seguridad-maestro.tk/slideshow.js"></script>
    <script src="http://www.seguridad-maestro.tk/js/jquery.slides.js"></script>

</body>
</html>

Upvotes: 0

Related Questions