Using only HTML and CSS, part of the text should transition in a Carousel without the use of JavaScript or jQuery

Looking to create a Carousel with changing text at a fixed interval, focusing on topics like mobile IoT application development and transport products. Currently utilizing the Aurelia framework.

$('#carouselExampleSlidesOnly').carousel({
  interval: 500
})
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active"><img class="d-block w-100" src="https://worldtransfer.online/wp-content/uploads/2016/09/worldmap-bg.jpg" alt="First slide">
      <div class="carousel-caption big clearfix p-5" style="width:fit-content">
        <div class="d-flex">
          <h1 class="text-uppercase text-white">We Architect,</h1>
          <h3 class="pt-2 pl-2">Design and Develop</h3>
        </div>
        <h1 class="text-uppercase"><span class="text-warning pr-3">Web</span>Application</h1>
      </div>
      <div class="carousel-caption d-none d-md-block"><img class="d-block w-75 image-left" src="https://cdn2.hubspot.net/hub/145335/file-407477601-gif/blog-files/the-importance-of-mobile-responsive-web-design.gif" alt="system Image"></div>
    </div>
  </div>
</div>

jqueryhtmlcsscarouselaurelia

Answer №1

Make sure your jQuery script is at the top of all your scripts, as shown in the example below:

var $ = jQuery;
$('#carouselExampleSlidesOnly').carousel({
  interval: 2000
})
.carousel-inner {
  background-image: url("https://worldtransfer.online/wp-content/uploads/2016/09/worldmap-bg.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 250px
}

.carousel-caption {
  top: 1em;
}

.carousel {
  position: relative
}

.d_flex {
  position: absolute;
  z-index: 99;
  justify-content: center;
  top: 10%;
  text-align: center;
  align-items: center;
  width: 100%;
}

.carousel-text {
  position: absolute;
  z-index: 99;
  height:100%;
  top:100%
}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="d_flex d-flex">
    <h2 class="text-uppercase text-white">We Architect,</h2>
    <h3 class="text-white">Design and Develop</h3>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <div class="carousel-caption" >
        <div class="carousel-text">
          <h1 class="text-uppercase">
            <span class="text-warning pr-3">Web</span>Application
          </h1>
        </div>
      </div>
    </div>
    <div class="carousel-item">
      <div class="carousel-caption">
        <div class="carousel-text">
          <h1 class="text-uppercase">
            <span class="text-warning pr-3">Mobile</span>Application
          </h1>
        </div>
      </div>
    </div>
    <div class="carousel-item">
      <div class="carousel-caption" >
        <div class="carousel-text">
          <h1 class="text-uppercase">
            <span class="text-warning pr-3">Desktop</span>Application
          </h1>
        </div>
      </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

JQuery Utilization: Constructing Queries - Techniques for Extracting Queries from Backend Code

Incorporating JQuery Query Builder into my ASP.net project. How can I retrieve the generated query from the code behind? Additionally, is there functionality to dynamically update one filter based on another selected filter? ...

c#jqueryasp.netwebformsquery-builder

Location of the cursor

Is there a way to determine the specific characters located to the left and right of the cursor position? ...

jquery

What is the best method for starting a string using the symbol '~'?

Hello everyone! I have a task that requires me to add a special feature. The user needs to enter something in a field, and if it starts with the tilde (~), all subsequent entries should be enclosed in a frame within the same field or displayed in a list ...

javascripthtmlcssstroke

active option in Opencart 2.1 is set to "selected"

I've implemented the AJAX module d_quickcheckout to speed up the checkout process on opencart 2.1 (not the default one). However, I'm encountering an issue with a field in the payment address section that is always pre-selected with the region/st ...

javascripthtmlajaxopencartopencart2.x

Is it possible to use bootstrap to hide specific components depending on the size of the media screen?

Struggling with styling responsiveness and hoping to find a Bootstrap class that can easily hide components on medium and small screens. I'm looking for a way to hide headings, paragraphs, buttons, and more without any extra hassle. ...

htmlcssbootstrap-5

Issue with OnChange event in HTML and Adding Content with Jquery

I'm currently working on an app that includes a dynamic dropdown feature using jQuery and the append() method to display changing numbers dynamically. Everything seems to be functioning well in the first field of the form, but when I try to add more f ...

javascriptjquery

Position a <div> element in the center of another <div> element

Link to code: https://jsfiddle.net/z4udfg3o/ My goal is to center the "caixa" divs within the "produtos" div. Initially, I achieved this by using exact values with margin-left. However, I now want it to be responsive across different screen sizes, so I ha ...

htmlcss

Is there a way in JavaScript to launch a link in a new tab and overlay a div on top of the existing content of the page?

Is there any method in JavaScript to open a link in a new tab and add a div element on that page? Let's say I have a page called page1.html which has a div containing a link and two radio buttons "yes" and "no". I want to open the link in a separate t ...

javascripthtmljqueryhyperlink

What are the steps for implementing two Li elements in HTML with distinct attributes?

Usage I decided to utilize li elements in various ways on a single web page. I used them as part of a navbar at one point and then later repurposed them for an image grid. Issue The problem arises when the dropdown menu within the navbar is partially hid ...

htmlcss

Issue with transition on the second attempt

In this code snippet, I have managed to achieve my desired outcome but it seems to only work on the first run. I am not sure why this is happening, so if anyone can help me out that would be greatly appreciated. Here is a demo of the code in action: HTML ...

jqueryhtmlcss

Angular's Spanning Powers

How can I make a button call different methods when "Select" or "Change" is clicked? <button type="button" class="btn btn-default" *ngIf="!edit" class="btn btn-default"> <span *ngIf="isNullOrUndefined(class?.classForeignId)">Select</spa ...

htmlangulartypescript

The Jquery.ajax function is passing null values to the controller, but it functions properly when using pre-defined

I have been working on a simple app in VS Code where I need to save values into a database. This is the code snippet I have written so far. var name = $("#TextName").val(); var price = $("#TextPrice").val(); var descrip ...

c#jqueryajaxasp.net-mvcasp.net-ajax

Overriding Bootstrap's Sass variables

Struggling to customize Bootstrap variables in my main.scss file @import "node_modules/bootstrap/scss/functions"; @import "node_modules/bootstrap/scss/variables"; @import "node_modules/bootstrap/scss/mixins"; $primary: green; ...

csssassbootstrap-5

When adding a border radius to an iframe, you'll notice delicate curved lines appearing on all four corners

I have implemented material UI's CardMedia component to display an Iframe with a embedded youtube link. To achieve rounded corners for the iframe, I set the border-radius to 30px. Although it successfully rounds the corners, it also introduces thin li ...

cssmaterial-uilinethinborder-radius

Attempted everything... Clicking away but a div refuses to show up post-click, resulting in an error message

When attempting to click a button, I encountered an error stating that the element is not clickable at point (1333, 75) as another element would receive the click. This issue arose while using Google Chrome version 65. <li class="slds-dropdown-trigge ...

javahtmlselenium

Maintaining active navigation state in JQuery/JavaScript after clicking a link: tips and tricks

While many resources discuss adding the active class to a nav link using jquery, there is less information on maintaining the active state after the nav link has been clicked. After experimenting with code from various sources, I have attempted to set ses ...

javascriptjqueryhtmlcss

The Ajax data is appearing in the console, however, it is not being recognized as a valid PHP value

Hey there, I have a question about utilizing Ajax. I've searched for similar issues but can't seem to find anything that matches my problem. Below is the code in question: $(document).ready(function() { $("#nume").blur(function() { numeform = ...

phpjqueryajaxconsole

The longevity of JQuery features

As I work on setting up an on-click callback for an HTML element to make another node visible, I encountered a surprising realization. The following two statements appeared to be equivalent at first glance: $("#title").click($("#content").toggle); $("#tit ...

javascriptjquery

Issue with Ajax post redirection back to original page

I'm facing an issue with my ajax call where I send multiple checkbox values to a php file for processing and updating the database. The post request and database updates are successful, but the page doesn't return to the calling php file automati ...

javascriptphpjqueryajaxcheckbox

Cease the use of the jQuery.css() method

Does anyone know how to halt the jQuery css() function? I've successfully used the jQuery.stop() function to pause the animate() function, but I'm unsure about stopping css(). Any help is appreciated. Thanks! ...

jquerycssfunction