The text remains static and does not adjust its size when the screen is

I'm currently utilizing the text-only carousel feature found at this jsFiddle link. Below is the code I am using for resizing:

window.addEventListener("resize", resetCarousel);
function resetCarousel(){
    setCarouselHeight('#carousel-text');
    $('#carousel-text').carousel({
        interval: 15000
    });

The issue I am encountering is that when the screen size changes, the div containing all the text elements does not resize proportionally (it lacks responsiveness). The setCarouselHeight function is designed to determine the overall height required for all text items to be displayed. I need the setCarouselHeight function to execute every time the screen is resized. However, when I try doing it manually (e.g., window.onresize=func), even after using a timeout period, the item sizes continue to reflect the previous position rather than adjusting to the new sizing. Any suggestions or guidance on this matter would be immensely appreciated.

javascriptcsstwitter-bootstrapresponsive-designcarousel

Answer №1

After experimenting for two days and getting close, I decided to give the Owl carousel a try and found exactly what I was looking for right away. It turned out to be much simpler than bootstrap's carousel. The trick is to use the AutoHeight example and set autoheight to false. This will adjust the div height based on the tallest text element, making it very responsive. Check it out at . Hopefully this information proves helpful to someone.

Answer №2

In my opinion, achieving slider responsiveness without the use of JavaScript or the Owl plugin is possible with a straightforward CSS solution. Here's a snippet of my CSS code:

.carousel-inner>.item{
  min-height:350px;
}
@media screen and (max-width:767px){
  .carousel-inner>.item{
    min-height:250px;
  }
}
@media screen and (max-width:569px){
  .carousel-inner>.item{
    min-height:200px;
  }
}

For a demonstration, feel free to check out my live demo on jsfiddle

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

Connect the scroll wheel and then proceed to scroll in the usual way

There are two div elements with a height and width of 100%. One has the CSS property top:0px, while the other has top 100%. I have implemented an animation that triggers when the mousewheel is used to scroll from one div to the other. The animation functi ...

javascriptjquerycssgsap

Creating a glowing shimmer using vanilla JavaScript

After successfully creating the Shimmer Loading Effect in my code, I encountered a hurdle when trying to implement it. The effect is visible during the initial render, but I struggle with utilizing it effectively. The text content from my HTML file does no ...

javascriptajax

jQuery deduct a value from a given value

i have a full duration that is divided into multiple sections, the user needs to input the duration for each section i would like the system to calculate and display the remaining duration from the full duration, regardless of whether the user fills out ...

javascriptjqueryhtml

What is the best way to spin a div HTML layer?

I'm trying to modify a Div layer that looks like this: ... <style type="text/css"> <!-- #newImg { position:absolute; left:180px; top:99px; width:704px; height:387px; z-index:1; background-image:url(../Pictures/rep ...

javascriptcsshtml

Traversing an array of objects using D3.js

I'm attempting to create a row of bars that are all the same height and width based on their titles. I have an array of 100 objects, each with a key called results containing another array of 20 objects. This means I should end up with a row of 2000 b ...

javascriptarraysjsonobjectd3.js

What steps can be taken to ensure that all object properties become reactive?

Let's dive into this simplified scenario: interface Pup { name: string; age: number; } const puppy: Pup = { name: 'Rex', age: 3, }; The goal here is to establish a reactive link for each attribute within the puppy object. The usua ...

javascripttypescriptvue.jsvue-composition-apivue-reactivity

What is the best way to retrieve the source code generated by Ajax

I designed a PHP script that generates text dynamically and returns it with a unique div id. However, when I use Ajax to retrieve this text as responseText, I am unable to access the properties of the div using JavaScript because the new text is not added ...

phpjavascriptjqueryajaxdom

Babylon entities failing to run

Encountering a strange issue in my current project. I am working on a react application that incorporates Babylonjs for 3D rendering. While I am able to successfully load objects into the scene, I am facing a problem when attempting to create a PBR Materia ...

javascriptreactjsbabylonjs

Retrieve the API array index by checking the value of the 'Name' field

I am looking to compare the name of a button I click on with an array in order to find the matching name and then select the corresponding array number. Currently, I have a For loop that retrieves information from every team in the array, but I only requi ...

javascripthtmljqueryapidom

Warning: Promise rejection not handled in error

I've been working with nodejs, express, and argon2 in my project. However, I encountered an error that has left me puzzled as to why it's happening. Strangely, even though I don't have any callbacks in my code, this error keeps popping up. H ...

javascriptnode.jsexpressecmascript-6es6-promise

What is the best way to eliminate the input range in a React date range picker?

Here is an image illustrating a date range picker: https://i.stack.imgur.com/pwKaI.png I am looking to remove the labels for days before today and starting from today in the date range picker. How can I achieve this? Below is my code snippet: class Better ...

javascriptreactjsreact-daterange-picker

There was a failure to establish a Redis connection to the server with the address 127.0.0.1 on port 6379

Currently, I am working with node.js using expressjs. My goal is to store an account in the session. To test this out, I decided to experiment with sessions by following the code provided on expressjs var RedisStore = require('connect-redis')(ex ...

javascriptnode.jsexpressrediseconnrefused

Issues with Ionic's $state.go and ui-sref functions not functioning as expected in the app

While attempting to change the view on the Ionic View app for iOS (I have not tested on the Android app), I encountered a bug that seems to have a solution, but unfortunately, it does not work for me. Bug info: Bug info 2: My Ionic information is as fol ...

javascriptiphoneangularjsionic-frameworkionic-view

The previous successful execution of req.body is now yielding an undefined value

My req.body is suddenly undefined, even though it was working fine a few days ago. I've tried using the deprecated body-parser module, but no luck. Here's my code: JS: var express = require("express"); var router = express(); require(& ...

javascriptnode.jsexpressundefinedbody-parser

When displaying content within an iframe, toggle the visibility of div elements

I'm attempting to toggle the visibility of certain page elements based on whether the page is loaded in an iframe. <script>this.top.location !== this.location && (this.top.location = this.location);</script> The above code succes ...

javascripthtmlcssiframe

A bug encountered with AngularJS and dojox.charting: Error message 'nodeType' of null

My goal is to dynamically populate a div with various graphs from Dojo, depending on the current data model. However, I keep encountering the error message "Cannot read property 'nodeType' of null" when running my code. I suspect that this issu ...

javascriptangularjsdojoangularjs-directive

Click on a link element within a container and create a pop-up window using jQuery

I'm having trouble creating a popup using jQuery for the second A tag within a div. Here's what I've attempted: $(function() { $(".sites").find("a").eq(1).css("color", "red").dialog({ autoOpen: false, show: { effect: "fade ...

javascriptjqueryjquery-ui

After entering text manually, the textarea.append() function ceases to function properly

I've encountered a puzzling issue with a tiny fiddle I created: https://jsfiddle.net/wn7aLf3o/4/ The scenario is that clicking on 'append' should add an "X" to the textarea. It functions perfectly until I manually input some text in the te ...

javascriptjquery

Tracking progress in a Rails job using Coffeescript

Recently, I came across a helpful gem called this gem, which allows for the seamless integration of bootstrap progress bars and the delayed job gem. The example provided by the creator uses .haml files, but since my project utilizes erb and coffeescript, I ...

javascriptruby-on-railscoffeescriptprogress-barbootstrap-4

How to trigger a modal in React when a user attempts to reload or close the window?

My goal is to display a modal when a user attempts to reload the page, navigate to a new URL, or close the browser window/tab. Although the code currently triggers the modal successfully, an unwanted default alert window also pops up, and I want to elimin ...

javascriptreactjsalertonbeforeunload