Lines running horizontally above and below texts on slides

Looking to insert horizontal lines within slides. I'm new to design and would appreciate some help with the code for adding interior lines in the sliders. Can anyone provide assistance with this?

<div class="slideshow-container">

  <div class="mySlides fade">
    <div class="numbertext">1 / 3</div>
    <img src="banner.jpg" style="width:100%">
    <hr>
    <div class="text">Caption Text</div>
  </div>

  <div class="mySlides fade">
    <div class="numbertext">2 / 3</div>
    <img src="banner.jpg" style="width:100%">
    <hr>
    <div class="text">Caption Two</div>
  </div>

  <div class="mySlides fade">
    <div class="numbertext">3 / 3</div>
    <img src="banner.jpg" style="width:100%">
    <hr>
    <div class="text">Caption Three</div>
  </div>

  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>

</div>
<br>

<div class="center">
  <span class="slide" onclick="currentSlide(1)"> 01.</span>
  <span class="slide" onclick="currentSlide(2)">02.</span>
  <span class="slide" onclick="currentSlide(3)">03.</span>
</div>

javascripthtmlcssbootstrap-4slider

Answer №1

If you want to achieve a similar effect, consider using the following code:

.panel:not(:first-child)::before {
    padding: 10px;
    content: '';
    width: 60px;
    height: 2px;
    background-color: gray;
    display: inline-block;
}

Additionally, feel free to add more spans for extra styling options.

Answer №2

.center {
  width: 200px;
  display: flex;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

.slide {
  border-radius: 50%;
  background-color: green;
  width: 30px;
  height: 30px;
  color: #fff;
  display: inline-block;
  line-height: 30px;
  text-align: center;
  position: relative;
  z-index: 1;
  margin: 0 20px;
}

.slide:first-child {
  margin-left: 0;
}

.slide:after,
.slide:before {
  content: '';
  position: absolute;
  background: #fff;
  z-index: 1;
  height: 100%;
  width: 10px;
  right: -10px;
}

.slide:before {
  left: -10px;
  right: auto;
}

.slide:first-child:after {
  right: -10px;
}

.slide:last-child:after {
  left: -10px;
}

.slide:last-child {
  margin-right: 0;
}

.center:after {
  content: '';
  border: 1px solid green;
  position: absolute;
  height: 0px;
  right: -40%;
  left: 10px;
  top: 15px;
}
<div class="center">
  <span class="slide"> 01.</span>
  <span class="slide">02.</span>
  <span class="slide">03.</span>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Vows, Tobi, and Node.js come together for comprehensive REST API testing

Currently, I am in the process of merging the examples here and here to create a vows test for my node.js / express application that does the following: Creates a new user object Verifies that the response is correct Utilizes the returned _id to perform ...

javascriptnode.jsexpressvows

The AJAX call encountered an error

function fetchContent() { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("content").innerHTML = xhr.responseText; alert(this.res ...

javascriptphphtmlcssajax

What is the process to replace the image in these templates?

I recently downloaded a template from the internet and am in the process of developing a website. Can someone please guide me on how to change the icons highlighted in the black and red boxes as shown in the image? I am using Visual Studio and ASP.NET fo ...

jquerycssasp.net

Remove JSON data in JavaScript

"[ "{\"StudentID\":5042,\"Status\":\"Joshua picked up from school [0] at 12:41PM and reached home [0] at 12:43PM\",\"Date\":\"2013-11-20\"}", "{\"StudentID\":5042,\"Status\":\" ...

javascriptjqueryjson

Unable to display images using jquery

Just getting started. I'm attempting to load images from a folder. The HTML and JavaScript files are located in the same directory as the images, yet I am still unable to load them. $(function() { $('#main').append('<img src="plus. ...

javascriptjqueryimagefileload

Saving the initial state value in a variable in Vue.js is a crucial step in managing and

My dilemma involves an object in the Vuex store containing data that I need to utilize within a component. I have successfully accessed the data using a getter in the component. However, I am facing a challenge in preserving the initial value of this objec ...

javascriptvue.jsstatenuxt.jsvuex

Display a div in a specific color depending on whether the value is positive or negative, and

I created a counter but I want to change the color of the id="clicks" based on whether the value is positive or negative, and also add text accordingly. var clicks = 0; function clickplus() { clicks += 1; document.getE ...

javascripthtmlcss

How to position child divs at the center of a parent div

I am looking to set the maximum width of the "circlecontainer" to 300px, but I also want my 4 child divs (each with a max width of 300px) to remain centered in the browser when it exceeds a width of 1200px. Currently, they are aligned to the left side. Be ...

htmlcss

Looking for reliable resources on establishing a connection between a Google account and my application

I am currently working on creating a react native app that aims to simplify the user login process by allowing them to link their Google account with just one click. This way, users won't have to constantly log in every time they use the app. While I ...

javascriptreact-nativegoogle-accountaccount-linking

Initial orientation in the first-person control of Three.js

Is there a way to define a specific starting orientation for the FirstPersonControls in Three.js? I need the starting orientation to vary based on the view, but currently it always begins with vector3(0,0,0) as the target. How can I change this to start ...

javascriptthree.js

Expo BarCodeScanner becomes unresponsive (specifically, the camera) upon exiting the application

I am using Expo's BarCodeScanner component within a tab: return ( <View style={{ flex: 1, flexDirection: "column", justifyContent: "flex-end", }} > <BarCodeScanner onBarCodeScanned={s ...

javascriptreact-native

Safari: Contenteditable div text without spaces fails to wrap around an image when focused

In a hypothetical dialog layout, there is a div on the left side and an image on the right side. Both the div and the image start at the same vertical point. However, the text in the div is longer than the image. The desired layout is for the text to be di ...

htmlcsscontenteditable

Merging Related Objects into a Single Object Array (JavaScript)

I have extracted user and permission data from my database and now I want to merge the access object with each user object so that I can easily access all the necessary information when displaying user permissions on a page in my application. Luckily, the ...

javascriptarraysjsonreactjsobject

Inspect the JavaScript file for errors and find a solution to overcome them

Our website's select box has been updated to retrieve city options from a JavaScript array file using an ajax call request. This file is now dynamically created on a different server and then transferred to the static server where it is used to popula ...

javascriptarrays

How come I can't capture discord.js promise rejections within event callbacks?

As I delve into creating a discord bot, I encountered an interesting problem. To simplify things, here is a snippet that encapsulates the issue at hand: const Discord = require('discord.js'); const client = new Discord.Client(); client.on(&apo ...

javascriptnode.jsasynchronouses6-promisediscord.js

JavaScript functions may become unresponsive following ajax loading with tables

I have a table that is automatically generated by a database using PHP with four rows. The last row (4) has a button that triggers the function below, and this is repeated for every line. After clicking the button, the script sends a request to update the ...

javascriptjqueryajax

Encountering an issue while trying to pass hidden value data in array format to the server side

I am currently learning how to use Handlebars as my templating engine and encountering an issue with passing over data from an API (specifically the Edamam recipe search API). I am trying to send back the array of ingredients attached to each recipe card u ...

javascriptexpresshandlebars.js

Ways to ensure that my drop-down menu stays correctly positioned in line with my element?

I have successfully created a drop-down menu that appears when clicking on text with the class trigger to open it. However, I am facing an issue with aligning the menu correctly in my responsive page design: http://prntscr.com/7gw5ox As I resize the page: ...

javascriptjqueryhtmlcssdrop-down-menu

Adding custom fields to the user model in MongoDB using Next Auth during login is not possible

When a user logs in via next auth, I am looking to include custom fields to the default user model. I followed the instructions provided in the official documentation at https://next-auth.js.org/tutorials/typeorm-custom-models. Here is the code snippet: ...

javascriptreactjsmongodbnext.jsnext-auth

Property missing in Typescript type definition

In my Typescript Next project, I am using this component: import PageTitle from './pagetitle' import style from './contact.styl' export default function Contact() { return ( <section> <a name="contact"> ...

javascriptreactjstypescriptnext.js