What is the best way to incorporate a slider into both images and text?

I've been struggling to find a way to create a slider that includes both images and content side by side. Most tutorials I've come across only cover image carousels without incorporating text. Any suggestions on how I can achieve this would be greatly appreciated.

Check out the codepen for reference.

Snippet from index.html:

<div class="container slider-border mt-4">
  <i class="fa fa-angle-left" style="font-size:24px"></i>
<div class="row " id="oneImg">
  <div class="col-md-6">
    <img src="https://www.dropbox.com/s/9h4jk5s6ca0suqu/pic2.jpg?raw=1" class="img-fluid" width="400" height="300">     
  </div>
  <div class="col-md-6">
    <h4>John D</h4>
    <h5>Software Developer</h5>
    <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>
</div>

<div class="row" id="secondImg">
  <div class="col-md-6">
    <img src="https://www.dropbox.com/s/9h4jk5s6ca0suqu/pic2.jpg?raw=1" class="img-fluid" width="400" height="300">     
  </div>
  <div class="col-md-6">
    <h4>John D</h4>
    <h5>Software Developer</h5>
    <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>
</div>

<div class="row">
  <div class="col-md-6">
    <img src="https://www.dropbox.com/s/9h4jk5s6ca0suqu/pic2.jpg?raw=1" class="img-fluid" width="400" height="300">     
  </div>
  <div class="col-md-6">
    <h4>John D</h4>
    <h5>Software Developer</h5>
    <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>
 </div>
 <i class="fa fa-angle-right" style="font-size:24px"></i>
</div>
javascriptcss

Answer №1

Check out this easy-to-use jQuery slider code.

$(function(){
    
    var totalSlides = 3;
    var slideNumber = 1;
    setInterval(function(){
        if(slideNumber < totalSlides){
            if($("#slider-4").length > 0){
                $("#slider-4").hide("slide", {
                  "direction" : "left",
                  "duration" : 400
                });
            }
            $("#slider-"+ slideNumber +"").hide("slide", {
                  "direction" : "left",
                  "duration" : 400
                });
            slideNumber++;
            $("#slider-"+ slideNumber +"").show("slide", {
                  "direction" : "right",
                  "duration" : 400
                });
           
        } else {
            $("#slider-3").hide("slide", {
                  "direction" : "left",
                  "duration" : 400
                });
            slideNumber = 0;
            $("#slider-4").show("slide", {
                  "direction" : "right",
                  "duration" : 400
                });
        }
    }, 8000);
    
});
.slider-wrapper{
overflow-x: hidden;
position: relative;
width: 100%;
height: 500px;
}
.slides{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
}

#slider-1{
display: block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="slider-wrapper">
  <div class="slides" id="slider-1">
    <div class="row">
      <div class="col-md-6">
        <img src="https://www.dropbox.com/s/9h4jk5s6ca0suqu/pic2.jpg?raw=1" class="img-fluid" width="400" height="300">     
      </div>
      <div class="col-md-6">
        <h4>John A</h4>
        <h5>Software Developer</h5>
        <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>
    </div>
  </div>
  <div class="slides" id="slider-2">
    <div class="row">
      <div class="col-md-6">
        <img src="https://www.dropbox.com/s/9h4jk5s6ca0suqu/pic2.jpg?raw=1" class="img-fluid" width="400" height="300">     
      </div>
      <div class="col-md-6">
        <h4>John D</h4>
        <h5>Software Developer</h5>
        <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>
    </div>
  </div>
  <div class="slides" id="slider-3">
    <div class="row">
      <div class="col-md-6">
        <img src="https://www.dropbox.com/s/9h4jk5s6ca0suqu/pic2.jpg?raw=1" class="img-fluid" width="400" height="300">     
      </div>
      <div class="col-md-6">
        <h4>John B</h4>
        <h5>Software Developer</h5>
        <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>
    </div>
  </div>
  <div class="slides" id="slider-4">
    <div class="row">
      <div class="col-md-6">
        <img src="https://www.dropbox.com/s/9h4jk5s6ca0suqu/pic2.jpg?raw=1" class="img-fluid" width="400" height="300">     
      </div>
      <div class="col-md-6">
        <h4>John C</h4>
        <h5>Software Developer</h5>
        <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>
    </div>
  </div>
</div>

Give this a try for your next project!

Answer №2

If you're interested in adding a carousel to your website, owl carousel and slick carousel are great options to consider. Both are user-friendly and can help you achieve the desired functionality.

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

Form an array using the values that are returned

As I iterate through an object and extract elements, my console.log displays: ["item 1"] ["item 2"] ["item 3"] and so on. All I want is to create a new array formatted like this: ["item 1","item 2","item 3"]; ...

javascript

What exactly is the purpose of utilizing node js and can someone explain to me what constitutes a

After mastering HTML and CSS, I've started diving into JavaScript. However, I'm curious about Node.js. What exactly is it, why do I need it, and can you explain what a framework is in general? Sorry if these questions sound silly! ...

javascriptnode.jsframeworks

What is causing my console to be spammed by Web3 .GetReserves()?

My code is successfully retrieving the data, but I am encountering an issue where my request for token reserves ends up spamming the server with repeated requests. This causes me to temporarily lose access to data retrieval (I hope I'm not the only on ...

javascriptreactjsweb3js

How does ng-repeat determine the presence of duplicates within an array of objects?

angular.module("myApp",[]) .controller("myCtrl",function($scope) { $scope.persons = [{name:"teja",age:11}, {name:"Ash",age:12}, {name:"teja",age:11}]; }); In ...

javascriptangularjsarrays

Utilize JavaScript to load images at random within a Qualtrics loop and merge block

I'm currently putting together a survey on qualtrics using a block with loop and merge functionality. I've encountered an issue where, after the first iteration, the images I'm loading through javascript start disappearing. Although I can br ...

javascriptqualtrics

Managing browser back button functionality

I've been struggling to find a solution for handling the browser back button event. I would like to prompt the user with a "confirm box" if they click on the browser back button. If they choose 'ok', I need to allow the back button action, ...

javascriptjqueryhtmlbrowser

Mastering the Vue 3 Composition API: A guide to efficiently utilizing it across multiple Vue instances spread across different files

tl;dr What is the best way to import Vue3 in a base Javascript file and then utilize Vue's composition API in subsequent standalone files that will be loaded after the base file? I incorporate Vue to improve user interactions on specific pages like t ...

javascriptvue.jswebpackvuejs3vue-composition-api

Tips for directing your attention to a specific cell within a grid after inputting a value into a textBox

I am looking to navigate to a specific cell within a grid by entering the cell number into a textBox. Upon typing any number in the textBox, it should automatically focus and scroll to that particular cell in the grid. For example, if I type 601 in the te ...

javascriptreactjsmaterial-ui

JavaScript/jquery loop with an increasing index each iteration

I am currently working with a JSON file that contains paths to various images. I want to regularly add more image paths to this file and display them on an HTML page. However, I am encountering an issue when using the $.each method - the index remains the ...

javascriptjqueryhtml

I am eager to output the JavaScript value

My JavaScript code in a webpage looks like this. <SCRIPT language="javascript"> function addRow(tableID) { var table = document.getElementById(tableID); var rowCount = table.rows.length; var row = table. ...

javascriptecho

What is the best way to make useEffect trigger on an array's sorting?

Currently, I am working with a data object structured like this: const example = [{medicineName: "Some name", medicineId: 1}, {medicineName : "Some other name", medicineId : 2} ] const [filteredMedicineList, setFilteredMedicineList] = useState([]); ...

javascriptreactjs

Arrange the header and input within a div using flexbox to achieve different alignments

I need help aligning the header section vertically and ensuring responsiveness. Using margin-top isn't fully responsive, so I want to align the header at the beginning of the input field.https://i.sstatic.net/w3xSP.jpg { margin: 0px; paddin ...

htmlcss

The concealed [hidden] attribute in Angular2 triggers the display of the element after a brief delay

I am currently utilizing the [hidden] attribute within my application to conceal certain elements based on a specific condition. The situation is such that I have two divs - one for displaying results and another for showing the text "No results". Both t ...

javascripthtmlangularangular2-directives

Issues encountered while converting scss to css with gulp

I've been attempting to convert SCSS to CSS, and here's the code I've been working with. const gulp = require('gulp'); const sass = require('gulp-sass'); gulp.task('sass', function() { return gulp.src(&apos ...

javascriptcsssassgulp

Conflict between JavaScript function and CSS styling

I'm facing an issue with a radio button in a large form that has some styling applied to it. The background color changes when hovered or checked, but there seems to be a conflict with an important JavaScript function in the rest of the form. It took ...

javascripthtmlcssforms

React function failing to utilize the latest state

I'm facing an issue with my handleKeyUp function where it doesn't seem to recognize the updated state value for playingTrackInd. Even though I update the state using setPlayingTrackInd, the function always reads playingTrackInd as -1. It's p ...

javascriptnode.jsreactjstypescriptreact-hooks

Text value remains unaltered in Chart.js plugins afterDatasetUpdate function

I am able to see the console logs console.log('here'); and console.log(args.meta._dataset.data[0]); when the datasets value changes, indicating that the function is being triggered. However, I am not seeing the text displayed on the screen. What ...

javascriptreactjschartschart.js

Securing sensitive data on the client side with JavaScript Vue or React for enhanced safety

In one scenario, a Vue.js application is used where sensitive data is retrieved from a server via HTTPS upon loading the app. This data is then stored in the Vuex Store on the client side. Is there a potential risk of someone being able to access this dat ...

javascriptreactjssecurityvue.jssingle-page-application

Angular successfully compiled without any issues despite the explicit cast of a number into a string variable

As I delve into the initial concepts of Angular, I have come across a puzzling situation. Here is the code snippet: import { Component } from '@angular/core'; @Component({ selector: 'sandbox', template: ` <h1>Hello {{ nam ...

javascriptangulartypescript

I found myself unable to execute a query with varying conditions using mongoose

These are my Operator Models: const operatorSchema = new Schema({ operatorName: { type: String }, users:[{ email:String, payment:Number, paymentsData: Date, product: String, }], }); I am lookin ...

javascriptnode.jsmongodbmongoose