Is there a way to dynamically alter the content depending on the index of the current slide using swiper.js?

Hi, I am new to utilizing the Swiper framework and so far, it has been one of the best sliders I have ever experienced. Currently, I am trying to establish a connection between 2 div tags - one tag holds the content of each slide while the other tag controls the function of the slides. My goal is to display the content of the active slide when it is being viewed. Can anyone guide me on how to achieve this?

var swiper = new Swiper(".swiper-container", {
  effect: "coverflow",
  grabCursor: true,
  centeredSlides: true,
  slidesPerView: "auto",
  coverflowEffect: {
    rotate: 20,
    stretch: 0,
    depth: 350,
    modifier: 1,
    slideShadows: true
  },
  pagination: {
    el: ".swiper-pagination"
  }
});
.items_content-2, .items_content-3 {
 display : none;
}
.picture img {
  width : 100%;
  height : 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css" rel="stylesheet"/>
<div class="content">
<div class="items_content-1">
Slide-1
</div>
<div class="items_content-2">
Slide-2
</div>
<div class="items_content-3">
Slide-3
</div>
</div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="picture one">
<img src="https://source.unsplash.com/random?sig=52" alt="">
</div>
</div>
<div class="swiper-slide">
<div class="picture">
<img src="https://source.unsplash.com/random?sig=24" alt="">
</div>
</div>
<div class="swiper-slide">
<div class="picture">
<img src="https://source.unsplash.com/random?sig=53" alt="">
</div>
</div>
</div>
</div>

javascripthtmlcss

Answer №1

To enhance your user experience, you have the option to combine two swipers together:

var swiper = new Swiper(".swiper-container", {
  effect: "coverflow",
  grabCursor: true,
  centeredSlides: true,
  slidesPerView: "auto",
  coverflowEffect: {
    rotate: 20,
    stretch: 0,
    depth: 350,
    modifier: 1,
    slideShadows: true
  },
  pagination: {
    el: ".swiper-pagination"
  }
});

   var swiper2 = new Swiper(".swiper-container2", {
  effect: "coverflow",
  grabCursor: true,
  centeredSlides: true,
  slidesPerView: "auto",
  coverflowEffect: {
    rotate: 20,
    stretch: 0,
    depth: 350,
    modifier: 1,
    slideShadows: true
  },
  pagination: {
    el: ".swiper-pagination"
  }
});
swiper2.params.control = swiper;
swiper.params.control = swiper2;
.picture img {
  width : 100%;
  height : 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css" rel="stylesheet" />

<!-- first swiper -->
<div class="swiper-container2">
<div class="swiper-wrapper">
    <div class="swiper-slide">
        <div class="items_content-1">
            Slide-1
        </div>
    </div>
    <div class="swiper-slide">
        <div class="items_content-2">
            Slide-2
        </div>
    </div>
    <div class="swiper-slide">
        <div class="items_content-3">
            Slide-3
        </div>
    </div>
</div>
</div>

<!-- second swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
    <div class="swiper-slide">
        <div class="picture one">
            <img src="https://source.unsplash.com/random?sig=52" alt="">
        </div>
    </div>
    <div class="swiper-slide">
        <div class="picture">
            <img src="https://source.unsplash.com/random?sig=24" alt="">
        </div>
    </div>
    <div class="swiper-slide">
        <div class="picture">
            <img src="https://source.unsplash.com/random?sig=53" alt="">
        </div>
    </div>
</div>
</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

What is the reason for findUser.username returning as unidentified?

I am encountering an issue where the findUser.username is being printed in my console.log, but the error persists. I would appreciate some assistance with this problem. Thank you. const auth_user = [ { username: "amylussie", password: ...

javascriptreactjs

Variable scope fails to update upon selection change

I'm currently setting up a select dropdown with an ng-options. The dropdown is appearing correctly on the HTML page, but for some reason, when I choose an option, the variable specified by ng-model is not updating in $scope. This is the HTML code: &l ...

javascriptangularjs

Ways to prevent a background image from centering at a designated width

Is it possible to prevent a background image from centering at a specific width? To demonstrate the issue, try narrowing the width of the website linked below until scroll bars appear. Take note of how the background image stays centered while other eleme ...

css

Unable to choose the option from the modal that functions similarly to a drop-down menu

I need to choose a field that functions similarly to a dropdown box, but does not actually display as one. The select field reveals its values in a pop-up with values and sub-values that I need to select. Challenges : I'm struggling to locate the ob ...

javahtmlcssxpathselenium

Are there any plugins available that can create a Ken Burns effect using JQuery?

All I need is a straightforward plugin, not one for creating slideshows. In this case, I only have 1 div and 1 image. The goal is to have the image animate within the div, shifting left/right or up/down without any white space visible. The size of the ima ...

javascriptjquerycssimagetemplates

Tips for displaying the data on top of individual column bars: Hightcharts, Vue-chartkick, and Cube Js

Looking for assistance with adding value labels to the top of each column bar in a Vue chart using chartkick and highcharts. https://i.sstatic.net/c4Bwc.jpg Check out the image above to see my current output. <template> <column-chart lable= ...

javascriptvue.jshighchartsvue-chartjscube.js

Incorporating a self-invoking anonymous function to enhance Sir Trevor within an AngularJS framework while also making use of

I recently started working with AngularJS and I have an App where I am using the Sir Trevor content editor. I want to add some custom blocks to the editor by extending it, but I am having trouble accessing angular services within my extension code. The ext ...

javascriptangularjs

Retrieving data from a remote source repeatedly based on user selections on a single page

In my current project, I am utilizing next js to build a web application. One of the pages in this app has the following structure: <page> <component_1> This component fetches data from a remote server using `getInitialProps` (alternat ...

javascriptnode.jsreactjsnext.js

Tips for handling datetime in angular

Currently, I am working with Angular (v5) and facing an issue related to Datetime manipulation. I am trying to retrieve the current time and store it in a variable. After that, I need to subtract a specified number of hours (either 8 hours or just 1 hour) ...

javascriptangulardatetimemomentjs

loading JSON file using dynamic JavaScript techniques

My Raspberry Pi is running a C++ application in the background that performs complex mathematical calculations based on sensor input and generates results every second. I want to showcase this data on a website by having the application create a JSON file ...

javascriptjson

Firefox encounters a border-radius glitch

Having an issue with the border-radius function in Firefox. After applying it, I notice a strange space or border around the item. Does anyone know if this is a bug specific to Firefox or if there is a solution for it? Here is an example of the problem: J ...

firefoxcss

Troubleshooting issues with Firebase integration in a Node.js environment

I am currently encountering difficulties implementing Firebase in my Node.js project. Below is the code snippet that I am attempting to execute on Node. var firebase = require("firebase"); var admin = require("firebase-admin"); var serviceAccount = requi ...

javascriptnode.jsfirebase

After installation, the Tailwind classes seem to be malfunctioning

Let me start by mentioning that although the title of this question is reminiscent of this other question on Stack Overflow, I have already tried the solutions provided there with no success. I initially attempted to set up Tailwind using their official C ...

htmlcsstailwind-css

Is it possible to display a value conditionally based on a condition from a Json object?

I'm looking to add a new feature that displays all the movies featuring Sean Connery in a button, but I'm stuck on how to implement it. Prettier 2.7.1 --parser babel </pre> Input: import React, { useState } from "react"; import ...

javascriptreactjsjsonbuttonaxios

Utilizing an Office App Ajax that includes an authentication header, the application connects to a secure Web API 2 backend with CORS

I am currently in the process of developing a content panel application for Office. As part of this project, I need to authenticate an account against a server. To accomplish this, I have implemented my own AuthorizationFilterAttribute on my web api 2 con ...

javascriptajaxcorsasp.net-web-api2office-app

When jQuery updates the content, the div content disappears temporarily

I am currently using jQuery to generate HTML by fetching data from a JSON file. Below is the code snippet where I create the HTML: $(document).ready(function () { $('#searchForm').submit(function () { var entry= $("#searchFo ...

javascriptjqueryhtml

What could be the reason for my Node.js Express response coming back as empty?

While working on a registration system, I have encountered an issue. When errors occur in the form, I receive the correct error messages. However, when a user with the same email attempts to register and triggers 'res.json({error: 'email exists& ...

javascriptnode.jsjsonexpress

`Set the body height to equal that of the entire document`

Currently facing an issue on the test page when scrolling down: The body element is set to have a height of 100%, but it only takes up the viewport's height, not the entire document height. The goal is for the page to always display at 100% of the d ...

cssheight

Tips for wrapping a div around its floated children

I'm currently developing a website for an online shopping cart and working on making the search results responsive. I am aiming to display as many items as possible across the screen (usually 3) when viewed on any device with a resolution lower than t ...

javascripthtmlcsse-commerce

The opacity of each div within a container increases as you move from one div to the

I am striving to craft a series of divs that feature varying levels of opacity in their background colors, creating a gradient effect. In an attempt to achieve this, I utilized a variable linked to the ID of each individual div. Unfortunately, my efforts ...

jquerycssarraysrgba