What steps can I take to make this menu more leisurely?

I've been experimenting with creating a horizontal menu using HTML and CSS.

    <section class="latest-albums-area section-padding-100">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="section-heading style-2">
                    <p>Discover What's New</p>
                    <h2>Latest Albums</h2>
                </div>
            </div>
        </div>
        <div class="row justify-content-center">
            <div class="col-12 col-lg-9">
                <div class="ablums-text text-center mb-70">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida dignissim justo, at tristique massa blandit quis.</p>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-12">
                <div class="albums-slideshow owl-carousel">
                    <!-- Single Album -->
                    <!-- Add your album content here -->

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

However, when I view it on the server, the animation speed seems too fast. How can I slow down the movement to prevent it from changing every 15 seconds? I've searched through the CSS and JavaScript files but couldn't locate the specific class responsible for this behavior. Should I create a new class or modify an existing one to adjust the timing?

htmlcsswebweb-deployment

Answer №1

To arrange your list of albums in a horizontal row, you can use the following CSS properties within the div tags:

<div class="single-album" style="display:inline; float:left; padding-right:20px">
     <img src="img/kali/k-1.png" alt="">
     <div class="album-info">
               <a href="#">
                    <h5>The Start</h5>
                </a>
           <p>beginners</p>
     </div>
</div>

You can also add padding to the divs to create spaces between them by using the padding-right attribute.

Your updated code should look something like this:

  <section class="latest-albums-area section-padding-100">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="section-heading style-2">
                    <p>See what’s new</p>
                    <h2>Latest Albums</h2>
                </div>
            </div>
        </div>
        <div class="row justify-content-center">
            <div class="col-12 col-lg-9">
                <div class="albums-text text-center mb-70">
                    <p>Nam tristique ex vel magna tincidunt, ut porta nisl finibus. Vivamus eu dolor eu quam varius rutrum. Fusce nec justo id sem aliquam fringilla nec non lacus. Suspendisse eget lobortis nisi, ac cursus odio. Vivamus nibh velit, rutrum at ipsum ac, dignissim iaculis ante. Donec in velit non elit pulvinar pellentesque et non eros.</p>
                 </div>
             </div>
         </div>

        <div class="row">
            <div class="col-12">
                <div class="albums-slideshow owl-carousel">
                    <!-- Single Album -->
                    <div class="single-album" style="display:inline; float:left; padding-right:20px">
                        <img src="img/kali/k-1.png" alt="">
                        <div class="album-info">
                            <a href="#">
                                <h5>The Start</h5>
                            </a>
                            <p>beginners</p>
                        </div>
                    </div>

                    <!-- Add more Single Album entries here with similar structure-->
               
                </div>
            </div>
        </div>
    </div>
</section>

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

Switching images upon hovering in AngularJS

Looking to change images on hover in my Angular app, encountered site peculiarities making CSS solution impractical. Resorted to using ng-mouseenter and ng-mouseleave for image swapping instead. landing.jade img.share-button(src='images/btn_share.p ...

htmlcssangularjs

Advantages and disadvantages of distinct methods for looping through HTML elements

My JS code generates HTML elements that are structured like this: <div id="container"> <div id="block_1" class="blocks"></div> <div id="block_2" class="blocks"></div> <div id="block_3" class="blocks"></di ...

javascriptjqueryhtml

Steps to execute Java code (.class) with PHP and showcase on the identical web page

I've been working on running a Java program using a PHP script. Initially, the PHP script presents a form for users to input two values: Price and Sales Tax Rate. Then, it processes these values and sends them to a precompiled Java program (saved as ...

javaphphtml

The button's unclickability is due to the zIndex being set to -1

How can I create a clickable button? Feel free to check out the sandbox example here: https://codesandbox.io/s/m5w3y76mvy ...

cssreactjsbuttonmaterial-uiz-index

Enable users to modify the URL in the window.open() function

In the code snippet below, a new window opens when a user clicks on a button: $('.loginButton').click(function () { var strString = $("#medlineSearch").val() var strSearch = "http://google.com&query="; var url = strSearch + strSt ...

javascriptjqueryhtml

Avoid making GET requests when clicking on a link

[UPDATE] I need help troubleshooting an issue with my ajax request. Here is the code snippet that I am working on: <a href="" class="undo_feedback">Undo</a> When I click on the link, it triggers an ajax POST request, but I encounter an error ...

javascriptjqueryajaxhtmlnode.js

AngularJS: ng-show causing flickering issue upon page refresh

Recently, I encountered an issue with my code snippet: <body> <ng-view></ng-view> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script> <script src="http://ajax.googleapis.com/ajax/ ...

javascripthtmlcssangularjs

Being required to design a distinct div for every article I am extracting from the API

In the midst of developing a website for my college project, I have successfully configured my news API to pull and display data using JavaScript. Currently, I am faced with the challenge of having to create separate div elements each time I want to add n ...

javascripthtmlcss

What's the best way to align a bottom navigation bar in the center?

Hey there! I recently added a bottom navigation bar to my website using HTML and CSS code. However, I'm having trouble centering it at the bottom of the page. Any suggestions or solutions would be greatly appreciated. Attached are screenshots of the H ...

htmlcssnavbar

The PHP Include function seems to be malfunctioning and unable to properly display

Everything you see is what I have on my home.php page <?php include ('../bgs/bg-verbier.html'); include('../menus/menu-verbier.html'); ?> Both of the files requested are located in the parent directory. The /menus/menu-v ...

phpcss

Activate on click using JavaScript

When a link with the class .active is clicked, I want to use a JavaScript function to deactivate any other active links. The structure of the code should be as follows: <ul class="product"> <li><a href="#myanmar" class="active">Mya ...

javascriptjqueryhtmlcssonclick

"Effortless alignment: Centralizing CSS styling across the entire

I need help placing a loading spinner in the center of my screen, ensuring it works on both mobile and desktop devices. Here is my current CSS code: .spinner { width: 100px; height: 100px; position:absolute; top: 50%; left: 50%; margin: 100px ...

htmlcssruby-on-rails-5

Switching the way hyperlinks behave when clicked, from requiring a double-click to a single

My code is working properly, but I need my links to open with just a single click. The issue is that the delete, approve, and not approve links require a double click for their function to run. I'm hoping someone can help me with this. index.php < ...

phphtml

What is the best way to transfer an argument from a parsed JSON value to an onclick function?

In our dataset, we have a specific table that contains valuable information. My main objective is to transfer an argument extracted from parsed JSON data to a separate JavaScript function known as newStory(value['stories']) using the onclick meth ...

javascriptjqueryhtml

Unable to access or click on Wordpress links or site titles

On my website, www.website.com, I have a main Wordpress installation and a test site at www.website.com/test. The main site functions correctly, but the links on the test site are behaving strangely. I have set the post title as the permalink structure (w ...

phphtmlwordpress.htaccess

Struggling to eliminate the padding beneath the menu items in Bootstrap?

I'm having trouble adjusting the padding inside my menu. I want to make it less chunky and large, but so far I've only been successful in removing the top padding. The bottom padding just won't budge. Here's the code that helped fix th ...

jqueryhtmltwitter-bootstrapcss

Configuring Google Maps API (including charts) for maximum height of 100%

I am having trouble getting my map to display at 100% height using the Google Maps API. I've encountered similar issues in the past with the Google Charts API as well. From what I've gathered, it seems like setting the height of the html and bod ...

javascripthtmlcssgoogle-mapsgoogle-maps-api-3

"Enhancing Layouts with Bootstrap: Implementing Spacing Between

Is there a way to add additional margin space between columns in my Bootstrap grid layout? I attempted to use a custom CSS class like this .classWithPad { margin: 10px; padding: 10px; } However, this did not resolve my issue. I also experimented w ...

htmlcsstwitter-bootstrapbootstrap-4

Struggling to follow the placement of elements within the treeview component

I have successfully implemented a method to track the positions of Div elements on my webpage. However, I am facing an issue with keeping track of the position of a div within a modal popup extender that contains a TreeView. The position is always reset to ...

c#asp.nethtmlajaxmodalpopupextender

Remove inline CSS from HTML elements

Having a large HTML file structured like this: <div style="min-height: 32px; padding: 5px; width: 800px; margin: 50px auto; overflow: auto; font-size: 12px;" class="selectable clearfix selected_layer" id="wrap"> <div class="selectable" id="l1" st ...

javascriptjqueryhtmlcss