3

I am new to HTML and CSS.

I want to do a Single Web Page with Navbar and Image Slider.

What I have done is:

<div class="col-sm-6">
    <div class="carousel-inner">

      <div class="item active">
        <img src="https://source.unsplash.com/random/300x201" style="width:640px; height:280px;">
        <div class="carousel-caption">
          <h3>Image 1</h3>
          <p>Image 1 Image 1</p>
        </div>
      </div>
    <div class="item">
        <img src="https://source.unsplash.com/random/300x202"  alt="Image 2" style="width:640px; height:280px;">
        <div class="carousel-caption">
          <h3>Image 2</h3>
          <p>Image 2 Image 2</p>
        </div>
      </div>
    </div>
    </div>
    <div class="col-sm-6">
    <div class="carousel-inner">

      <div class="item active">
        <img src="https://source.unsplash.com/random/300x204" alt="Image 4" style="width:640px; height:280px;">
        <div class="carousel-caption">
          <h3>Image 4</h3>
          <p>Image 4 Image 4</p>
        </div>
      </div>

      <div class="item">
        <img src="https://source.unsplash.com/random/300x205" alt="Image 5" style="width:640px; height:280px;">
        <div class="carousel-caption">
          <h3>Image 5</h3>
          <p>Image 5 Image 5</p>
        </div>
      </div>
        </div>
      </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>

This is what I have done for Image Slider. It shows two images when the web page opens. But for next slide it shows only one image. I need two images for all slides(2).

All should be done only by HTML and CSS not JS or others.

Improve this question
5
  • 1
    You have two questions here. Please post separate questions for each. Also, both of these seem to be asking us to code this for you which makes it equally unacceptable in it's current form. Commented Dec 6, 2019 at 12:09
  • 1
    Please review How to ask questions on Stack Overflow and what types of questions can be asked and what types should be avoided. Commented Dec 6, 2019 at 12:10
  • edited. Please Check! Commented Dec 6, 2019 at 12:19
  • You've stripped out the second question but you have not shown us what you have tried to resolve this. Commented Dec 6, 2019 at 12:23
  • I just split the columns by class col-sm-6. But it doesn't works. Commented Dec 6, 2019 at 12:25

2 Answers 2

Reset to default
2 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" 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.7/umd/popper.min.js"
            integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
            crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
            integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
            crossorigin="anonymous"></script>
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
                   aria-haspopup="true" aria-expanded="false">
                    Dropdown
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
            </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
    </div>
</nav>

<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">
            <div class="row">
                <div class="col-md-6 col-sm-6" style="padding: 0">
                    <img src="http://cssslider.com/sliders/demo-17/data1/images/picjumbo.com_hanv9909.jpg"
                         height="600px"
                         class="d-block w-100" alt="...">
                </div>
                <div class="col-md-6 col-sm-6" style="padding: 0">
                    <img src="http://wowslider.com/sliders/demo-77/data1/images/road220058.jpg" height="600px"
                         class="d-block w-100" alt="...">
                </div>
            </div>
        </div>
        <div class="carousel-item">
            <div class="row">
                <div class="col-md-6 col-sm-6" style="padding: 0">
                    <img src="http://cssslider.com/sliders/demo-17/data1/images/picjumbo.com_hanv9909.jpg"
                         height="600px"
                         class="d-block w-100" alt="...">
                </div>
                <div class="col-md-6 col-sm-6" style="padding: 0">
                    <img src="http://wowslider.com/sliders/demo-77/data1/images/road220058.jpg" height="600px"
                         class="d-block w-100" alt="...">
                </div>
            </div>
        </div>
        <div class="carousel-item">
            <div class="row">
                <div class="col-md-6 col-sm-6" style="padding: 0">
                    <img src="http://cssslider.com/sliders/demo-17/data1/images/picjumbo.com_hanv9909.jpg"
                         height="600px"
                         class="d-block w-100" alt="...">
                </div>
                <div class="col-md-6 col-sm-6" style="padding: 0">
                    <img src="http://wowslider.com/sliders/demo-77/data1/images/road220058.jpg" height="600px"
                         class="d-block w-100" alt="...">
                </div>
            </div>
        </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>

</body>
</html>

Since you are using bootstrap, I will add an HTML code for Navbar and Slider using Bootstrap components. It is better to use Bootstrap since it is very easy to create awesome responsive HTML components using Bootstrap.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" 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.7/umd/popper.min.js"
            integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
            crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
            integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
            crossorigin="anonymous"></script>
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
                   aria-haspopup="true" aria-expanded="false">
                    Dropdown
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
            </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
    </div>
</nav>

<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 src="http://cssslider.com/sliders/demo-17/data1/images/picjumbo.com_hanv9909.jpg" height="600px"
                 class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
            <img src="http://wowslider.com/sliders/demo-77/data1/images/road220058.jpg" height="600px"
                 class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
            <img src="https://slidervilla.com/smooth-slider/files/2014/05/3.jpg" height="600px" class="d-block w-100"
                 alt="...">
        </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>

</body>
</html>

.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

It works...Thank you so much:)) But, In slider it shows only one image. I need Two images per slide. Any Idea? @Pramodya Mendis
0

Hope @Pramodya fix your rendering issue in the previous answer. I changed his answer a little to display 2 images in 1 slide.

If you want to display 2 images in 1 slide, You need to use flex layout. 

--------------------Display: flex-----------------------
|                           |                          |
|           flex: 1         |           flex: 1        |
|                           |                          |
--------------------------------------------------------

Checkout this snippet.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" 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.7/umd/popper.min.js"
            integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
            crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
            integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
            crossorigin="anonymous"></script>
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
                   aria-haspopup="true" aria-expanded="false">
                    Dropdown
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
            </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
    </div>
</nav>

<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">
            <div style='display:flex'>
              <div style='flex:1'>
                <img src="http://cssslider.com/sliders/demo-17/data1/images/picjumbo.com_hanv9909.jpg" height="600px" class="d-block w-100" alt="...">
              </div>
              <div style='flex:1'>
                <img src="http://cssslider.com/sliders/demo-17/data1/images/picjumbo.com_hanv9909.jpg" height="600px" class="d-block w-100" alt="...">
              </div>
            </div>
        </div>
        <div class="carousel-item">
                 <div style='display:flex'>
              <div style='flex:1'>
                <img src="http://wowslider.com/sliders/demo-77/data1/images/road220058.jpg" height="600px"
                 class="d-block w-100" alt="...">
              </div>
              <div style='flex:1'>
                <img src="http://wowslider.com/sliders/demo-77/data1/images/road220058.jpg" height="600px"
                 class="d-block w-100" alt="...">
              </div>
            </div>
        </div>
        <div class="carousel-item">
                  <div style='display:flex'>
              <div style='flex:1'>
                <img src="https://slidervilla.com/smooth-slider/files/2014/05/3.jpg" height="600px" class="d-block w-100"
                 alt="...">
              </div>
              <div style='flex:1'>
                <img src="https://slidervilla.com/smooth-slider/files/2014/05/3.jpg" height="600px" class="d-block w-100"
                 alt="...">
              </div>
            </div>
        </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>

</body>
</html>

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.