Slideshow box with images aligned perfectly

Question

Slideshow box with images aligned perfectly

I have designed a container with images, but my goal is to:

either show the images inline or stack them on top of each other, and then be able to navigate through them using jQuery.

I attempted absolute positioning on both .box and .box img, as well as using display: inline, but it caused issues in the code.

Here is what I have so far:

.box {
    position: absolute;
    left: 10%;
    width: 80%;
    border: 10px solid white;
    border-radius: 10px;
    box-shadow: 0 0 4px black;
  }

  .box img {
    width: 100%;
  }

  .prev, .next {
    border: 1px solid black;
    padding: 5px;
  }

  .prev:hover, .next:hover {
    background-color: red;
    color: white;
    text-decoration: none;
  }

<div class="container-fluid">
<h1>Welcome Within</h1>
<div class="box">
  <img src="http://www.dan-dare.org/FreeFun/Images/PrinceOfPersiaWallpaper21024.jpg" />
<img src="https://www.gamewallpapers.com/img_script/mobile_dir2/img.php?src=wallpaper_prince_of_persia_warrior_within_18_ipad.jpg&height=755&width=850&crop-to-fit" />
<img src="https://r.mprd.se/media/images/66295-Prince_Of_Persia_Warrior_Within_READNFO-4.jpg" />
    <br /></br />
    <a href="#" class="prev">PREVIOUS</a>
    &nbsp;
    <a href="#" class="next">NEXT</a>
</div>
  </div>

html css

Answer 1

Answer №1

Give this a shot:

.container {
  position: relative;
  left: 10%;
  width: 80%;
  border: 10px solid white;
  border-radius: 10px;
  box-shadow: 0 0 4px black;
  height: 300px;
  overflow: hidden;
  margin-bottom: 10px;
}

.caption {
  position: absolute;
  top: 10px;
  color: red;
  font-size: 20px;
  background: #fff;
  left: 30%;
}

.container img {
  width: 100%;
}

.prev,
.next {
  border: 1px solid black;
  padding: 5px;
}

.prev:hover,
.next:hover {
  background-color: red;
  color: white;
  text-decoration: none;
}

<div class="container-fluid">
  <h1>Welcome Within</h1>
  <div class="slider">
    <a href="#" class="prev">PREVIOUS</a>
    <a href="#" class="next">NEXT</a>
    <div class="container">
      <img src="http://www.dan-dare.org/FreeFun/Images/PrinceOfPersiaWallpaper21024.jpg" />
      <p class="caption">Caption1</p>
    </div>
    <div class="container">
      <img src="https://www.gamewallpapers.com/img_script/mobile_dir2/img.php?src=wallpaper_prince_of_persia_warrior_within_18_ipad.jpg&height=755&width=850&crop-to-fit" />
      <p class="caption">Caption2</p>
    </div>
    <div class="container">
      <img src="https://r.mprd.se/media/images/66295-Prince_Of_Persia_Warrior_Within_READNFO-4.jpg" />
      <p class="caption">Caption3</p>
    </div>
  </div>
</div>

Answer 2

Give this a shot:

.container {
  position: relative;
  left: 10%;
  width: 80%;
  border: 10px solid white;
  border-radius: 10px;
  box-shadow: 0 0 4px black;
  height: 300px;
  overflow: hidden;
  margin-bottom: 10px;
}

.caption {
  position: absolute;
  top: 10px;
  color: red;
  font-size: 20px;
  background: #fff;
  left: 30%;
}

.container img {
  width: 100%;
}

.prev,
.next {
  border: 1px solid black;
  padding: 5px;
}

.prev:hover,
.next:hover {
  background-color: red;
  color: white;
  text-decoration: none;
}

<div class="container-fluid">
  <h1>Welcome Within</h1>
  <div class="slider">
    <a href="#" class="prev">PREVIOUS</a>
    <a href="#" class="next">NEXT</a>
    <div class="container">
      <img src="http://www.dan-dare.org/FreeFun/Images/PrinceOfPersiaWallpaper21024.jpg" />
      <p class="caption">Caption1</p>
    </div>
    <div class="container">
      <img src="https://www.gamewallpapers.com/img_script/mobile_dir2/img.php?src=wallpaper_prince_of_persia_warrior_within_18_ipad.jpg&height=755&width=850&crop-to-fit" />
      <p class="caption">Caption2</p>
    </div>
    <div class="container">
      <img src="https://r.mprd.se/media/images/66295-Prince_Of_Persia_Warrior_Within_READNFO-4.jpg" />
      <p class="caption">Caption3</p>
    </div>
  </div>
</div>

Answer 3

Answer №2

Here is my attempt:

$(document).ready(function() {
  $('.lightbox').click(function() {
    $('.backdrop, .box').animate({
      'opacity': '.50'
    }, 300, 'linear');
    $('.box').animate({
      'opacity': '1.00'
    }, 300, 'linear');
    $('.backdrop, .box').css('display', 'block');
  });

  $('.close').click(function() {
    close_box();
  });

  $('.backdrop').click(function() {
    close_box();
  });

//Image Slider
$('.next').click(function(){
clickNext();
});
$('.prev').click(function(){
clickPrev();
});

});

function close_box() {
  $('.backdrop, .box').animate({
    'opacity': '0'
  }, 300, 'linear', function() {
    $('.backdrop, .box').css('display', 'none');
  });
}

//Previous Image
function clickPrev() {
$('.img_1').css('display', 'block');
//Move to the previous Image
$('.img_2').css('display', 'none');
}

//Next Image
function clickNext() {
$('.img_1').css('display', 'none');
//Move to the next Image
$('.img_2').css('display', 'block');
}

body {
  font-family: Helvetica, Arial;
}

.backdrop {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: .0;
  filter: alpha(opacity=0);
  z-index: 50;
  display: none;
}

.box {
  position: absolute;
  top: 50%;
  transform: translate(-50%,-50%);
  left: 50%;
  background: white;
  text-align: left;
  z-index: 51;
  padding: 0;
margin: 0;
  display: none;
-webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0px 0px 5px #444444;
  -webkit-box-shadow: 0px 0px 5px #444444;
  box-shadow: 0px 0px 5px #444444;
  border: 10px solid #fff;
width: 44%;
}

.box img {
width: 100%;
}

.box img:nth-child(2) {
display: none;
}

.caption {
padding-top: 10px;
  font-size: 15px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<h1>Welcome Within</h1>
<a href="#" class="lightbox">Open Lightbox</a>
<div class="backdrop"></div>
<div class="box">
  <img class="img_1" src="http://www.dan-dare.org/FreeFun/Images/PrinceOfPersiaWallpaper21024.jpg" />
<img class="img_2" src="https://www.gamewallpapers.com/img_script/mobile_dir2/img.php?src=wallpaper_prince_of_persia_warrior_within_18_ipad.jpg&height=755&width=850&crop-to-fit" />

  <div class="caption">
<p>This thing is called 'Caption'...Feels nice. Let me tell you:</p>
      <hr />
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>

    <a href="#" class="prev">PREVIOUS</a>
  &nbsp;
  <a href="#" class="next">NEXT</a>
</div>
</div>

Answer 4

Here is my attempt:

$(document).ready(function() {
  $('.lightbox').click(function() {
    $('.backdrop, .box').animate({
      'opacity': '.50'
    }, 300, 'linear');
    $('.box').animate({
      'opacity': '1.00'
    }, 300, 'linear');
    $('.backdrop, .box').css('display', 'block');
  });

  $('.close').click(function() {
    close_box();
  });

  $('.backdrop').click(function() {
    close_box();
  });

//Image Slider
$('.next').click(function(){
clickNext();
});
$('.prev').click(function(){
clickPrev();
});

});

function close_box() {
  $('.backdrop, .box').animate({
    'opacity': '0'
  }, 300, 'linear', function() {
    $('.backdrop, .box').css('display', 'none');
  });
}

//Previous Image
function clickPrev() {
$('.img_1').css('display', 'block');
//Move to the previous Image
$('.img_2').css('display', 'none');
}

//Next Image
function clickNext() {
$('.img_1').css('display', 'none');
//Move to the next Image
$('.img_2').css('display', 'block');
}

body {
  font-family: Helvetica, Arial;
}

.backdrop {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: .0;
  filter: alpha(opacity=0);
  z-index: 50;
  display: none;
}

.box {
  position: absolute;
  top: 50%;
  transform: translate(-50%,-50%);
  left: 50%;
  background: white;
  text-align: left;
  z-index: 51;
  padding: 0;
margin: 0;
  display: none;
-webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0px 0px 5px #444444;
  -webkit-box-shadow: 0px 0px 5px #444444;
  box-shadow: 0px 0px 5px #444444;
  border: 10px solid #fff;
width: 44%;
}

.box img {
width: 100%;
}

.box img:nth-child(2) {
display: none;
}

.caption {
padding-top: 10px;
  font-size: 15px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<h1>Welcome Within</h1>
<a href="#" class="lightbox">Open Lightbox</a>
<div class="backdrop"></div>
<div class="box">
  <img class="img_1" src="http://www.dan-dare.org/FreeFun/Images/PrinceOfPersiaWallpaper21024.jpg" />
<img class="img_2" src="https://www.gamewallpapers.com/img_script/mobile_dir2/img.php?src=wallpaper_prince_of_persia_warrior_within_18_ipad.jpg&height=755&width=850&crop-to-fit" />

  <div class="caption">
<p>This thing is called 'Caption'...Feels nice. Let me tell you:</p>
      <hr />
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>

    <a href="#" class="prev">PREVIOUS</a>
  &nbsp;
  <a href="#" class="next">NEXT</a>
</div>
</div>

Slideshow box with images aligned perfectly

Answer №1

Answer №2

Similar questions

Utilizing a switch to deactivate all currently active classes on individual div elements

Margin challenge in CSS

A step-by-step guide on changing the class of a focused contenteditable element with a button click using jQuery

Transform in-line elements using specific HTML attributes using CSS styling

Does CSS in the current IE9 beta allow for text shadows to be implemented?

Exploring different sections of the website

Select a division and retrieve the identification of a different division

The e.currentTarget attribute in Material UI buttons is a key element that

Trouble getting custom CSS media queries to function properly alongside Bootstrap 3

Retrieving table information using javascript

issue with fetching response from ajax post call in slim framework 3

Inspecting element value on a website

Creating a unique Bootstrap background design

Connect Bootstrap Tabs to a pagination system (Backward Forward)

What is the best way to create a sliding <nav> effect when a <div> is clicked?

What is required to create a basic application that can function offline while featuring an HTML/CSS user interface?

The data-ng-bind directive cannot be used with the <option> tag

Unable to Display Bootstrap 4 Navbar on Hamburger Menu

Verify if a set of Radio buttons contains at least one option selected

Challenges encountered when redirecting users with a combination of javascript and php