Struggling to make rCarousel function properly due to navigation width and autoscroll issues

I'm having some trouble figuring out what's going wrong with my rCarousel setup. Specifically, I can't seem to get the top part labeled "vrienden van het koksgilde" to work properly.

Despite following the instructions on , I'm still not sure where I've gone astray.

After double-checking the links to the scripts and css, everything seems to be in order. However, the navigation isn't functioning as expected, the autoscroll feature isn't working, and I'm struggling to adjust the width of the carousel to fit within its container.

Upon inspecting the elements using Firebug, it appears that inline styles are being applied, which may be causing issues.

Any assistance or guidance would be greatly appreciated.

jqueryhtmlcsscarousel

Answer №1

Currently, the carousel only contains 3 items that are all visible, so there is no need to click previous/next ;)

The issue with the css can be found on line 33:

#topbox1 div, #topbox2 div, #topbox3 div {
    color: #888888;
    line-height: 17px;
    padding: 5px 10px 5px 14px;
    width: 100%;
}

This code sets the width of all divs within the specified containers to 100%, totaling 300px plus padding = 324px, causing them to break out. The same applies to the H1 tags, where they bleed out of their containers.

To fix this and maintain a width of 276px with padding included:

#topbox2 #carousel {width:276px;}

To make it more specific:

#topbox1 > div, #topbox2 > div, #topbox3 > div {
    color: #888888;
    line-height: 17px;
    padding: 5px 10px 5px 14px;
    width: 276px;
}

Only target immediate child divs within the #topboxes and remove the width from the headings:

#topbox1 h1, #topbox2 h1, #topbox3 h1 {
   color: #FFFFFF;
   font-size: 24px;
   padding: 7px 10px 10px 14px;
}

I hope this explanation helps!

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

JavaScript code that triggers when a checkbox is not selected

I'm attempting to dynamically add an input field when a checkbox is clicked, with the intention of having the checkbox already checked by default. However, I am encountering an issue where the checkbox remains unchecked even after the input field is d ...

javascripthtmlcheckboxinnerhtml

Restrict the width of an absolutely positioned element to the width of its

FIDDLE I have a situation where I need to position an element absolutely, like a drop-down menu. However, when the window is resized and becomes narrow, there is not enough space for it. My requirements are: - The right edge of the dropdown should not g ...

javascriptjqueryhtmlcss

Using jQuery to modify the border of a particular row

I am facing an issue where I need to apply a border to two specific rows in a table after it has loaded. These two rows are consistent every time the table is loaded. The code snippet below works, but the default line breaks between the table rows prevent ...

jqueryhtmlcsstwitter-bootstrap

Chrome browser not responding to jQuery .html refresh

I am facing an issue with a page containing a list of tasks, each with a dropdown menu featuring a list of teams to which the task can be assigned. However, pre-populating the dropdown in the Action function is not feasible due to the large number of tasks ...

jqueryasp.net-mvc-3

Tips for verifying blank form fields

Is there a way to validate empty form fields before submission and show an alert? This validation is important as some fields are hidden using v-show. Here is an example: <!DOCTYPE html> <header> <script src="https://unpkg.com/vue@n ...

javascripthtmlvue.js

The styling of HTML elements is ineffective when using scoped styles

I'm facing an issue where my element styling doesn't seem to work when using the scoped attribute. Upon inspecting the element, it appears that the styling is not being applied when using scoped. The reason I need to use scoped is because I want ...

htmlcssvue.jsnuxt.js

Tips on achieving horizontal scrolling for div overflow instead of wrapping onto a new line

It's a frequent occurrence in mobile apps to have a navbar with selectable text options that overflow horizontally without breaking into a new line. Instead, users must scroll horizontally to access all the options available. Is there a way for me to ...

htmlcssreactjsuser-interfacefrontend

Determining the offsetWidth and scrollWidth for option elements within a select field containing the multiple attribute on Internet Explorer 11

My select input element has multiple attributes and a fixed width set. Unfortunately, due to the fixed width, the overflowing content in the x-direction is not visible. To address this issue, I have created a JavaScript function that uses the title attribu ...

javascripthtmlcss

What steps can be taken to further personalize this pre-existing jQuery sorting solution?

After coming across a solution for adding sorting capabilities to jQuery (source: jQuery sort()), I decided to tweak it to handle strings of variable lengths. Although the modified function sorts in ascending order, I found it quite effective. jQuery.fn.s ...

javascriptjqueryarrayssorting

Spinning platform featuring curved edges

Is there a way to achieve rounded corners on a carousel in Android Studio? I attempted using a background, but it didn't work as expected. <com.synnapps.carouselview.CarouselView android:background="@drawable/radius_fon ...

androidkotlincarousel

What is the method to deactivate child elements within an element that possesses the disabled attribute in Polymer?

What are some effective methods for disabling children elements when at least one parent element is disabled? I have a form with nested groups and fields that can be disabled based on certain conditions. Different parent elements may be disabled independe ...

htmlpolymerdisabled-inputrecursive-datastructures

Change the x and y positions of several div elements as the mouse moves in JavaScript

I am aiming to create a webpage where multiple divs with text and other content move along the x and y axes of the mouse. The desired effect is similar to parallax scrolling, but I have found that existing parallax plugins are image-based and do not work w ...

javascriptjquerycssmouseeventparallax

Do not proceed if the process has encountered a failure

Using PHP code, I have created a way for people to get in touch with me and share their opinions. Here is the PHP code snippet: <?php $to = '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ef9b868c848a9bc19d869b8e988a8 ...

javascriptphphtmlajax

The thickness of the line on the Google line chart is starting to decrease

Currently, I am utilizing a Google line chart in my application. However, I have noticed that for the first two data points, the lineWidth is thick, while for the last two points it is very thin. How can I resolve this issue and ensure that the lineWidth r ...

javascriptjquerychartsgoogle-visualization

Events for focusing and blurring top level windows

I'm encountering an issue with a basic frameset setup <frameset rows="100, 200"> <FRAME name="listener" src="frame1.html"> <FRAME name="content" src="http://www.someexternalurl.com/"> </frameset> Within the listener ...

javascriptjqueryevents

Javascript leaping across intervals

I'm currently working on creating a unique JavaScript slideshow with a customized pause interval for each slide. Let's say I have a slideshow with 3 slides and I want the pause intervals to be as follows: 30 seconds 8 sec 8 sec |---- ...

javascriptjquery

What is the best way to utilize XPATH effectively within scrapy?

Explore more here Check out this link too: https://i.stack.imgur.com/8bhzV.png If you are struggling with finding the red marked box number, take a look at the image on this link: https://i.stack.imgur.com/mca05.png Don't worry, I have provided my ...

pythonhtmlxpathscrapy

The text element does not line up with the icons

As I'm working on creating my first account page header, I've run into an issue with some of the icons not aligning perfectly with the text. While advanced developers may find this task simple, as a beginner, I could really use some advice on how ...

htmlcss

Strategies for restricting user input within a datalist

I have a project in which I am creating a webpage that displays a list of flights that can be filtered by destination, origin, price, and more. To achieve this, I have categorized each flight within a div element using its specific properties as classes. F ...

javascripthtmlcss

Varied selection menu feature

Looking to build a new component: The idea is to create something similar to a dropdown list. I aim to incorporate this component into every cell (td) of table rows. The challenge lies in displaying the second div (item list) under the first div, but abov ...

csshtml