Parallax scrolling and Swiper slider, a match made in digital design

Currently facing an issue with Swiper Slider and Simple Parallax Scrolling. Whenever I switch slides, the same image is displayed repeatedly.

I suspect the problem lies in the fixed position of the image within the parallax effect.

Attempted to resolve by adding a z-index for .swiper-slide-active, but unfortunately, it did not yield any positive results.

HTML structure:

<div class="top-slider swiper-container w-100 fl">
    <div class="swiper-wrapper">
        <div class="slide-item swiper-slide" data-parallax="scroll" data-image-src="img/top_slide_01.jpg">

        </div>
        <div class="slide-item swiper-slide" data-parallax="scroll" data-image-src="img/top_slide_02.jpg">

        </div>
    </div>
</div>

Javascript snippet:

// Implementing Top slider functionality
var topSlider = new Swiper('.top-slider', {
    loop: true,
    slidesPerView: 1,
    effect: 'fade'
});

Seeking guidance on how to tackle this particular challenge effectively.

Alternatively, are there different approaches to achieve parallax scrolling?

jquerycssparallaxswiper.js

Answer №1

To achieve a simple Parallax Scrolling effect, a div .parallax-mirror is created with an image.

You can define a function:

setZIndexForBgInTopSlider = function() {

    var activeSlideBgUrl = $('.swiper-slide-active').attr('data-image-src');
    $('.parallax-mirror').each(function() {
        if (activeSlideBgUrl == $(this).find('.parallax-slider').attr('src')) {
            $(this).css('z-index', 10);
        } else {
            $(this).css('z-index', -100);
        }
    });

};

Then update your JavaScript code:

// Top slider
var topSlider = new Swiper('.top-slider', {
    loop: true,
    slidesPerView: 1,
    effect: 'fade',
    onInit: setZIndexForBgInTopSlider,
    onSlideChangeStart: setZIndexForBgInTopSlider
});

Currently, there is no background animation included, but you can easily add them using CSS.

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

Does jQuery UI Layout have compatibility issues with jQuery version 3.3.1?

jQuery UI Layout is compatible with older versions of jQuery, but not with newer versions... Here is a working example: <html> <head> <script src="http://layout.jquery-dev.net/lib/js/jquery-1.4.2.js"></script> <script ...

javascriptjquery

Swapping out bullet points for delicious food icons in an unordered list on an HTML page

I am working with the following code snippet: <div id="instructions"> <h3>Get it done</h3> <ol> <li>In a blender add the eggs, chocolate powder, butter, flour, sugar and milk.</li> <li>Then whisk ...

javascripthtmlcsstags

Customizing Angular Material Pagination: Replacing First and Last Icons with Text

Looking to customize the pagination layout, I have managed to style most elements except for replacing the first and last icons with text. Here is the current setup: https://i.stack.imgur.com/ZneZs.png I want it to look something like this: https://i.st ...

cssangularangular-materialpagination

Switching the background color of alternating divs in reverse order: a step-by-step guide

I am looking to alternate the background color of divs between odd and even, with the last div being grey and the second to last div being green. I have tried using the odd/even classes in CSS, but it did not work as expected. .main{ width:500px; height ...

javascripthtmlcss

Activate a JQuery animation to change numbers when I scroll over a div for the first time

I've created a one-page-style website with some statistics in the middle. I want these numbers to count up only once when a user first sees them after refreshing the page, without using a plugin. So, I decided to implement this functionality using jQu ...

javascriptjquery

Activate the zoom feature in jquery mobile

I am looking to implement the standard zooming effect in jquery mobile for my iOS iPhone app using jqm 1.3.2. After attempting the following: <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-s ...

javascriptjqueryiosjquery-mobile

When utilizing the image upload AJAX feature, duplicates of the uploaded images may appear without reloading the page

Currently grappling with a peculiar issue involving an ajax upload script embedded in a form loaded within a modal. Let me break down the strange behavior: Upload image 1 No problems encountered here. Upload image 2 Encountering issues whereby two id ...

phpjqueryajax

Prevent the next ajax request from overwriting the parameter value set in the previous request

When my application makes multiple ajax requests, I encounter a problem where the original set of parameters used for each request get changed by subsequent requests, leading to errors. Let's take an example: Request A initially sets an index of 0 in ...

javascriptjqueryajaxfunction

Trouble with the functionality of the Bootstrap collapse button

I am facing an issue where clicking on the collapse button does not trigger any action. I have tested it on both of my laptops, ruling out any problems with the web browser. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

jqueryhtmlcsstwitter-bootstrap-3

Creating a session using jQuery to maintain user data without having to refresh the entire

Struggling with setting a session using jQuery and AJAX without the need for a page refresh. Currently, I can only set the session by pressing the refresh button, which is less than ideal. My PHP page is separate from my jQuery code, making it challengin ...

jqueryajax

Animate the entrance of mobile content as it slides into view while scrolling

I am currently working on a WordPress theme and facing an issue: When I click the hamburger menu without scrolling down the page, the mobile menu slides in smoothly. However, if I scroll down the page, the mobile menu fails to slide into view (I have to s ...

css

The functionality of the controls is not functioning properly when attempting to play a video after clicking on an image in HTML5

While working with two HTML5 videos, I encountered an issue with the play/pause functionality. Despite writing Javascript code to control this, clicking on one video's poster sometimes results in the other video playing instead. This inconsistency is ...

javascriptjqueryhtmlvideo

Troubleshooting a problem with the Jquery Quicksearch plugin on constantly changing web

Quicksearch is pretty amazing... but it faces a usability issue that causes strange behavior. Many users hit enter after entering a search query, which reloads the page without any parameters and destroys the queries. Check this out: Adding: $('for ...

javascriptjquery

Struggling to retrieve Ajax data and assign it to a PHP variable?

My Code Snippet is: <script> $(document).ready(function(){ $(".states").on('click','option',function(){ var selectedValue = $("select[id='stateId'] option:selected").val(); $.post('<?p ...

phpjqueryajax

Designing a Dynamic Floating Element that Shifts with Scroll Movement

Hey there everyone!, I am currently working on a project in Wordpress and I was wondering if anyone has experience creating a floating widget that moves along with the page as you scroll. Any suggestions on how to achieve this? Would it involve using Javas ...

javascriptjquerycsswordpresswidget

Tips for coloring just the letters and excluding the Bengali Kar symbol

The Bengali language consists of 40 consonants, including ক, খ, গ, ঘ, ঙ, চ, ছ, জ, ঝ, ঞ, and more. Additionally, there are 10 vowels in the form of Kars, such as া, ি, ী, ু, ূ, ৃ, ে, ৈ, ো, and ৌ. My goal is to highli ...

htmlcssunicodediacriticsaccent-sensitive

The parent element is not able to apply the CSS text-decoration in jQuery

Is there a way to retrieve a specific CSS property of an element, even if it is inherited from its parent? The standard jQuery method .css() can help with this. Consider the following HTML structure: <div id="container"> some text<br> ...

jquerycsstext-decorations

Incorporate data from a CSV file into an HTML table on the fly with JavaScript/jQuery

I have a CSV file that is generated dynamically by another vendor and I need to display it in an HTML table on my website. The challenge is that I must manipulate the data from the CSV to show corrected values in the table, only displaying products and not ...

javascriptjqueryajaxcsvpapaparse

What is preventing the items inside the <ul> element from displaying?

Struggling to grasp pagination, I can't figure out why the contents of "li" under the "ul" disappear while the "ul" container continues to display despite specifying in the JavaScript that only 6 should be visible on the page. The "ul" and "li" elemen ...

javascriptphpjqueryhtmlcss

What is the best way to customize column width in AG-Grid?

I am looking for a way to dynamically set column width in my table. I have provided a stackblitz example which demonstrates that when changing the screen size, only the table border adjusts, but not the column widths. Is there a way to also change the col ...

javascripthtmlcssangular