In a carousel slider, the height and width of divs are not set to specific dimensions

For a code snippet, you can visit this link: here

The html:

<html lang="en">

<head>
    <link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i|Merriweather:300,400,700" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" />
    <link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">
</head>

<body>
    <section id="projects">
        <div class="content-box">
            <div class="content-title wow animated fadeInDown" data-wow-duration="1s" data-wow-delay=".5s">
                <h3>My Projects</h3>
                <div class="content-title-underline"></div>
            </div>
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div id="my-projects" class="owl-carousel owl-theme">
                            ...
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</body>

The css:

#projects {
    background-color: #f65d52;
}

...

The javascript:

$(document).ready(function () {
    $("#my-projects").owlCarousel({
        items: 1,
        autoplay: true,
        smartSpeed: 700,
        loop: true,
        autoplayHoverPause: true
    });
});

Hello everyone,

I'm encountering an issue with arranging divs in a carousel slider. The positions of project titles in each slide are changing as shown in the link above. Can someone assist me in fixing the width and height of each div so that text and images do not overflow, and all divs start at the same position in every slide instead of moving up or down?

javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

For optimal layout consistency, it's important to establish a fixed height for your images. Otherwise, the content may be shifted unexpectedly. If setting a fixed height on the images isn't feasible, consider fixing the position of the project title and description div elements. One solution could be making them absolutely positioned relative to their parent container.

Answer №2

To display images properly, set a fixed height:

.project-image img {
    width: 100%;
    max-width: 480px;
    height: 480px;
    margin: 0 auto;
}

Answer №3

Here is a suggestion: try setting a fixed height for your images.

$(document).ready(function () {
  $("#my-projects").owlCarousel({
    items: 1,
    autoplay: true,
    smartSpeed: 700,
    loop: true,
    autoplayHoverPause: true
  });
});
#projects {
  background-color: #f65d52;
}

#projects .content-title h3 {
  color: #fff;
}

.project-info {
  padding: 25px 0 25px 0;
  color: #fff;
}

/* The rest of the CSS code remains unchanged */

</body>

Answer №4

Include the responsiveClass to make all slides responsive.

 $(document).ready(function () {
        $("#my-projects").owlCarousel({
            items: 1,
            autoplay: true,
            smartSpeed: 700,
            loop: true,
            autoplayHoverPause: true,
            responsiveClass:true
        });

    });

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

Switch from monochrome to color when hovering inside a clipping mask

I have successfully mastered the technique of changing an image from grey to color on hover using CSS and JavaScript. However, I am curious about whether it is possible to achieve the same effect using a clipping mask. Attached is an image that illustrate ...

csshovermaskclipping

The file "tfjs_binding.node" could not be located in the directory where @tensorflow is installed

After attempting to utilize certain functionalities of TensorFlow, I encountered an error indicating that "tfjs_binding.node" was not found in the @tensorflow installation folder. I made sure to install Python 2.7 as a prerequisite for TensorFlow and veri ...

javascriptpythonnode.jstensorflownpm

Dealing with Issues in Projectile Image Display: Solutions for Resolving the Error

I've been attempting to change my projectile from circles to images, but I'm encountering this error File "C:\Users\Habib\Desktop\PYTHONGGAME\py.py", line 353, in <module> bullets.append(projectile(round(player ...

pythoncsspython-3.xpygame

Understanding the most recent tweet using the most up-to-date Twitter API

My goal is to retrieve the latest tweet using the most recent version of Twitter's API and add it to a specific div on my website. Despite attempting the code below, I have not been successful. If anyone could provide guidance on how I can accomplish ...

jqueryasp.net-mvc-4

Elements stacking up in succession

I am having issues with the alignment of my div elements, as they are either stacking behind or on top of each other. td { width: 14.28%; height: 16.6%; position: relative; } .details { position: absolute; display: none; ba ...

htmlcss

Differences between addEventListener and jQuery's on method, as well as form.submit and jQuery's

I encountered a situation where callbacks registered using jQuery's on method were not being called when trying to trigger form submission with the HTML Form element object instead of jQuery. After some testing, I discovered that changing the code to ...

javascriptjqueryhtmldom-events

Experience an enthralling carousel feature powered by the dynamic ContentFlow.js

My website features a cover flow style carousel with 7 images: <!-- ===== FLOW ===== --> <div id="contentFlow" class="ContentFlow"> <!-- should be place before flow so that contained images will be loaded first --> <div class= ...

javascriptjquerycarousel

Unable to access a nested JSON object that has a repeated name

I'm relatively new to working with JSON, so the issue I'm facing may be simple, but I haven't been able to find a similar problem on stackoverflow. Here's my question: My goal is to access a nested JSON object like: pizza.topping.ratin ...

javascriptjsonjsonp

How to easily align an image and blockquote vertically in CSS with automatic width for the blockquote

I am struggling with a layout issue involving a list of items containing images and blockquotes. My goal is to set a maximum width for the images and have the blockquotes automatically adjust their size to fit next to the images, all while keeping both ele ...

htmlcss

What is the best way to showcase a collapsible tree using AngularJS and Bootstrap?

I'm currently working on a web application that requires the display of a tree structure using lists. Here is the basic outline: * Node 1 * Node 1.1 * Node 1.1.1 * Node 1.1.1.1 * Node 1.1.2 * Node 1.2 http://jsfid ...

javascriptangularjstwitter-bootstrap

Oops! Looks like there was an error. The text strings need to be displayed within a <Text> component in the BottomTabBar. This occurred at line 132 in the

My app includes a bottomTab Navigation feature, but I encountered an error: Error: Text strings must be rendered within a <Text> component. This error is located at: in BottomTabBar (at SceneView.tsx:132) in StaticContainer in StaticCont ...

javascriptreactjsreact-nativereact-hooksreact-navigation

How to retrieve data obtained from parsing readline and fs in node.js beyond the scope of the callback function

This specific question diverges from the one mentioned with an existing answer. It pertains to a snippet of code taken from node.js documentation involving the use of fs and readfile, with a focus on detecting an end-of-file flag, which appears to be the r ...

javascriptjsonnode.jsreadfilefs

Ways to retrieve all elements based on their class names?

What is the equivalent of using $('.class') in JQuery to get all elements by class name with pure JavaScript? ...

javascript

What are some tips for incorporating Google Maps v3 with Twitter Bootstrap?

I'm looking to incorporate Twitter Bootstrap's Tabbed Menus into a Google Maps project that is currently coded entirely in javascript. The issue I'm facing is that since Twitter relies on jQuery, I'm unsure of how to effectively utilize ...

javascriptjquerygoogle-mapstwitter-bootstrapgoogle-maps-api-3

Retrieve the value of a field from a Formik form integrated with Material UI

I've been working on a way to disable a checkbox group depending on the selected value of a radio group. I took inspiration from the technique outlined in the final section of the Formik tutorial. Using React context has definitely helped clean up the ...

javascriptreactjsmaterial-uiformik

What are some effective ways to integrate the WordPress API with ReactJS?

Wordpress recently introduced an API that allows you to make HTTP requests without worrying about routes, as the backend is handled for you. I'm curious, how can I integrate ReactJs with Wordpress API? This has been a frustrating challenge for me be ...

javascriptajaxwordpressrestreactjs

Retrieving a specific object from a subarray using MongoDB's ID

My MongoDB document includes the following: const Categories = [ { _id: 's654fs54s6d4f' title: 'category 1', SubCats: [ { _id: 'jhgfsf68746' name: 'subcat 1', i ...

javascriptmongodbexpress

What is the best way to include a text input as the last option in a Select input form field?

I would like to implement a select input feature where users can choose from predefined options, with the added functionality of including a text input field as the last option for users who prefer to enter their own category. How can I achieve this? Curr ...

javascripthtmlcssnode.jsexpress

Can you show me a comprehensive list of all the REST endpoints for Express mounted Apps?

When working with Express 4, you can utilize the app._router.stack object to list your app routes. In one of the routes in my todos module routes file, I attempted to display this object by sending it as part of the response: exports.update = (req,res) = ...

javascriptnode.jsrestexpress

The media parameter seems to be malfunctioning when attempting to send it to the Kaleyra API using code

Attempting to send media through the Kaleyra API using my code is proving unsuccessful. However, when I make the same request via Postman, it works perfectly fine. async whatsappAPIWithAttachment(requestBody) { let api_key = ""; if (requ ...

javascriptnode.jsarraysexpress