Is it possible to incorporate a carousel within this parallax feature?

I recently downloaded a JavaScript library called paroller.js that has allowed me to create a captivating parallax effect on my website.

The effect is based on a background image (forsidebillede2.jpg) that covers the entire screen, and I even managed to incorporate a Bootstrap navbar within this effect.

Now, I am interested in cycling through different background images, perhaps creating a carousel with 2-3 images, but I'm unsure of how to achieve this.

I assume it involves changing the CSS background every X seconds, but I haven't been able to figure it out yet.

<div class="jumbotron text-center bg-faded my-5" id="baggrundtop" style="background: url('media/forsidebillede2.jpg') no-repeat center; min-height:800px;" data-paroller-factor="0.5"> 
    <!--Navbar-->
    <nav class="navbar navbar-fixed-top navbar-expand-lg navbar-dark primary-color ">
        <a href="#" class="navbar-left"><img src="media/lillelogo.png"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav"
                aria-controls="basicExampleNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class ="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="basicExampleNav">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#">Services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">References</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                </li>
            </ul>
        </div>
    </nav>
</div>
javascriptcssbootstrap-4carouselparallax

Answer №1

Love this concept! You can create multiple classes, each with a different image, and then utilize setTimeout to switch the classes in your preferred order. I haven't explored paroller.js yet, but you can achieve a similar parallax effect using plain CSS.

sample code snippet:

$(document).ready(function() {

  setTimeout(function() {
    $("#rotate").trigger('click');
  }, 2000);

  $("#rotate").click(function() {
    if ($('#parallaxDiv').hasClass("parallax1")) {
      $('#parallaxDiv').removeClass("parallax1");
      $('#parallaxDiv').addClass("parallax2");
    } else if ($('#parallaxDiv').hasClass("parallax2")) {
      $('#parallaxDiv').removeClass("parallax2");
      $('#parallaxDiv').addClass("parallax3");
    } else if ($('#parallaxDiv').hasClass("parallax3")) {
      $('#parallaxDiv').removeClass("parallax3");
      $('#parallaxDiv').addClass("parallax1");
    }

    setTimeout(function() {
      $("#rotate").trigger('click');
    }, 2000);

  });

});
.carousel-inner img {
  height: 100%;
}

#parallaxDiv {
  /* Define a specific height */
  min-height: 500px;
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.parallax1 {
  background-image: url("https://www.w3schools.com/howto/img_parallax.jpg");
}

.parallax2 {
  background-image: url("https://www.w3schools.com/bootstrap4/la.jpg");
}

.parallax3 {
  background-image: url("https://www.w3schools.com/bootstrap4/ny.jpg");
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<p>Scroll Up and Down this page to see the parallax scrolling effect.</p>

<div id='parallaxDiv' class="parallax2"></div>

<div style="height:1000px;background-color:red;font-size:36px">
  <button type="button" id='rotate'>rotate</button> Scroll Up and Down this page to see the parallax scrolling effect. This div is just here to enable scrolling. Tip: Try removing the background-attachment property for a different scroll effect.
</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

Conceal the button briefly when clicked

How can I disable a button on click for a few seconds, show an image during that time, and then hide the image and display the button again? HTML: <input type="submit" value="Submit" onclick="validate();" name="myButton" id="myButton"> <img st ...

javascripthtml

AngularJS - using ng-repeat before initializing the scope variable

Currently, I have set up a md-tabs configuration, which is bound to $scope.selectedIndex for the purpose of being able to change it programmatically. The process involves using a button to trigger a function that updates data. Subsequently, I modify $scop ...

javascriptangularjs

Trigger a function when a CSS animation reaches its completion

I am working on a small jQuery function that needs to return its value within a subfunction. The purpose behind this is so that I can later chain this function with other jQuery functions. However, I want the next chained function to start only after the m ...

javascriptjquerycsspromise

Enhancing a Dropdown List with Jquery Using JSON Data

I am trying to populate a list using a JSON collection of objects. Here is the method that my action is returning: public ActionResult GetProductCategories() { var categories = _entities.ProductCategories.ToList(); var res ...

javascriptjqueryjson

Using jQuery to extract the value of 'selectedValue' from RadDropDownList

My goal is clearly stated in the title. Within my '#dropdown' control, the value currently looks like this: value="{"enabled":true,"logEntries":[],"selectedIndex":8,"selectedText":"Option2","selectedValue":"250"}" I am specifically interested ...

javascriptjqueryparsingtelerikrad-controls

Collection of HTML elements that need to stay in the same section

I am struggling to align multiple vertical lines of data on a webpage and keep them together when the page size changes. I've been working with CSS and HTML code but finding it challenging. Any suggestions or alternative approaches would be greatly ap ...

htmlcsssubscriptsuperscript

The command 'var' is not recognized as an internal or external command within npm

I need assistance with installing the histogramjs package. The command npm i histogramjs successfully installs it, but when I attempt to run the code using var hist = require('histogramjs'), I encounter an error in the command prompt: 'var& ...

javascriptnode.jsnpm

Discover specific element details using the id with Strapi and React

I am currently studying react with strapi and I have encountered an issue. I have successfully displayed all elements from a database, but I am facing a problem when trying to display specific information on clicking an element. Although I can retrieve t ...

javascriptreactjsdatabasestrapi

Creating an interactive dropdown feature using AngularJS or Ionic framework

$scope.AllCities = window.localStorage.getItem['all_cities']; <div class="row"> <div class="col"> <div class="select-child" ng-options="citie.name for citie in AllCities" ng-model="data.city"> <label&g ...

javascriptangularjshtmlionic-framework

Switch out a character with its corresponding position in the alphabet

Starting out, this task seemed simple to me. However, every time I attempt to run the code on codewars, I keep getting an empty array. I'm reaching out in hopes that you can help me pinpoint the issue. function alphabetPosition(text) { text.split ...

javascriptarraysstring

Troubleshooting: Dealing with Stack Overflow Error when using setInterval in Vue Programming

I am facing a stack overflow error while creating a timer using Vue, and I'm struggling to understand the root cause. Can someone provide insights on the following code: Here is my template structure: <span class="coundown-number"> { ...

javascriptvue.js

Pressing the tab key makes all placeholders vanish

case 'input': echo '<div class="col-md-3"> <div class="placeholder"> <img src="images/person.png" /> &l ...

javascriptjqueryhtml

Utilize the ng.IFilterService interface within a TypeScript project

I am facing an issue with a .ts file that contains the following code: module App.Filters { export class SplitRangeFilter implements ng.IFilterService { static $inject = ['$filter']; public static factory(): Function { ...

javascriptangularjstypescriptangularjs-filter

Filter an array using regular expressions in JavaScript

Currently, I am facing a challenge in creating a new array of strings by filtering another array for a specific pattern. For example: let originalString = "4162416245/OG74656489/OG465477378/NW4124124124/NW41246654" I believe this pattern can be ...

javascriptarrayssplit

Utilizing mongoose data for rendering in express

Currently utilizing the Hackathon-starter framework, I am looking to incorporate the user's name from the database into the render title property in express.js. The specific file that requires modification can be found here ...

javascriptnode.jsexpressmongoosepug

Challenges with managing controllers within Directives

Currently, I am in the process of updating some code within a personal project that utilizes Angular to adhere to best practices. I have come across suggestions that the future direction of Angular involves incorporating a significant amount of functionali ...

javascriptangularjsangularjs-directiveangularjs-scopeisolate-scope

The problem of having an undefined state in Vuex arises

https://i.stack.imgur.com/52fBK.png https://i.stack.imgur.com/GcJYH.jpg There is an error occurring: TypeError: Cannot read property 'state' of undefined ...

javascriptvue.jsvuejs2vue-componentvuex

Clicking on an anchor tag will open a div and change the background color

.nav_bar { background: #c30015; margin-left: 50px; float: left; } .nav_bar ul { padding: 0; margin: 0; display: flex; border-bottom: thin white solid; } .nav_bar ul li { list-style: none; } .nav_bar ul li a { ...

javascriptjqueryhtmlcss

Tips on sending error messages to an MVC view during an Ajax call

When using ajax to call a controller action method on an MVC button click event, there may be validation logic in the controller that needs to notify the user of any errors. Is there a way to send an error message to the ajax success event from the control ...

javascriptjqueryajaxasp.net-mvcasp.net-mvc-4

Creating a wavy or zigzag border for the <nav id="top"> element in OpenCart version 2.3

I'm trying to achieve a wavy/zigzag border on the <nav id="top"> section in opencart v2.3 instead of a flat border. something similar to this example Below is the CSS code I am currently using: #top { background-color: #EEEEEE; borde ...

htmlcssopencartopencart2.3