Conflicting elements in Drupal's Flexslider causing a disruption

Having some trouble getting Flexslider to work on my website. I've searched through forums and the project page but couldn't find any solutions that worked for me. I installed it on another site without any issues, so I think this might be a unique problem with this specific site.

You can view my site here: . The nav buttons and pager are not showing up as expected - only the text appears on hover.

I'm looking to have the default basic slider functionality with nav buttons on hover and a pager at the bottom of the image. Any insights or help would be greatly appreciated. I believe someone with more programming skills might be able to identify the issue. Thank you!

jquerycssdrupaldrupal-7flexslider

Answer №1

The code structure includes pagination and arrow elements, but they require additional styling or configuration.

  1. Within the flexslider.css file, the .flex-control-nav class is set to display: none;, preventing the pagination dots from showing. Removing this style will make them visible.

  2. The "Previous" and "Next" buttons are provided by default but lack custom styling. In the same flexslider.css file, the section responsible for styling the control nav is currently commented out (lines 61 - 72 after /* Control Nav */). Uncommenting these lines will overlay the arrows on the slider upon hover, though further customization may be needed.

  3. An error related to twitterFetcher.js appears on the page. While it doesn't seem to cause disruptions, resolving this issue could potentially address your concerns.

I have experience with flexslider outside of the Drupal module context. I recommend reviewing the flexslider API and any accompanying documentation in the module. It may be necessary to choose a slider theme, adjust wrapping classes, or provide custom options to achieve the desired navigation functionality.

Flexslider:

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

Kendo React UI DataTable Filter providing a consistent experience similar to the JQuery Kendo UI

When using Kendo React, the grid's filter appears as a line below the header by default, as shown in the following image: https://i.sstatic.net/1CgIi.png However, in the JQuery version, the filter is presented as a button that triggers a modal windo ...

jqueryreactjskendo-uikendo-gridkendo-react-ui

Personalize Bootstrap 5 slider for mobile (displaying multiple items without being arranged in a single row)

Having trouble customizing the carousel layout for mobile devices. I'm trying to display all items of the carousel on mobile instead of just one. I've been experimenting with CSS and JS, specifically with the display, float, or max-width properti ...

javascriptcsstwitter-bootstrapcarouselbootstrap-5

Bootstrap navigation bar unresponsive on mobile devices

<nav class="navbar navbar-expand-sm fixed-top navbar-dark bg-dark"> <a class="navbar-brand" href="#">Yehee-Lounge</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav ...

htmlcsstwitter-bootstrapbootstrap-4

Position the checkbox to the left of the label

I currently have a checkbox with ripple effects. The label text is displayed before the checkbox in the code. However, I'd like to change the order so that the checkbox comes before the label text. Occasionally, the entire div expands and contracts. ...

htmlcss

How to convert jQuery data into JSON format

I am dealing with data in the following format: ID=300573&CarNo=1&Account=AAAA&AccountingDate=3%2F21%2F2013&Description=NewCar&CheckAmount=666666&ClearedAmount=-3446.5&ClearedDate=4%2F9%2F2013&Sent=S&SentDate=4%2F4%2F20 ...

jqueryjson

The hide and show buttons seem to be missing when utilizing the datatable API

For my current project, I referenced this example: https://datatables.net/extensions/responsive/examples/styling/bootstrap.html Despite trying various datatable API examples, I'm still unable to display the expand/collapse buttons. The required CSS a ...

jqueryhtmlcssdatatable

Using a CSS-animated DIV as a background with a transparent background DIV overlaid with content on top

In my attempt to overlay bootstrap/html/css on a CSS animated starfield background, I'm encountering some challenges. Online resources suggest using a 1x1 pixel png, but I am looking for a method to implement transparency through coding. Using backg ...

htmlcsstwitter-bootstrap

Ways to incorporate gentle page breaks into an HTML document

My task involves creating an XSL script to analyze various XML files that share a similar structure. The aim is to parse these XMLs and transform them into HTML pages. For longer XML documents, I want the resulting HTML page to be paginated (meaning the pa ...

htmlcssxslt

Margin discrepancies when using em units

Currently, I am utilizing an em-based margin for items within a menu that are homogeneous in terms of markup, class, and id. It appears that the margins for each of these items should be rendered the same. However, some are displaying as 1px while others a ...

htmlcss

Basic jQuery .ajax unable to locate JSON file

Having trouble locating a local file for an ajax call? Check out this jQuery script hosted in an IIS directory: $(function () { $.ajax({ "url": "sample.json", "type": "get", "dataType": "json", "success": function(data) ...

jqueryjsoniis

Adjust the CSS styling for a newly added row in a JavaFX TableView

Apologies for any errors, I am French. I am currently facing an issue with an empty tableView in my project. There is a button labeled "Add" that adds a row to the tableView when clicked. Another button labeled "Cancel" appears when a row in the tableView ...

cssjavafxtableview

Shaded box with bootstrap palette

After implementing Bootstrap to make my website responsive, I noticed that adding the container caused a white margin that does not blend with the background color. How can I fix this issue? https://i.sstatic.net/2gGL6.png <!-- Bootstrap-4 --> < ...

htmlcsstwitter-bootstrapbootstrap-4

Selected a radio button within a jQuery UI dialog box

After using jquery-ui, I was able to create a simple dialog window. It looks like this: <div id="dialog-form" title="Add Attribute Category"> <input type="radio" id="priceable" name="price" value="true" checked="checked"/> Priceable &l ...

jqueryhtmljquery-ui

intricate pattern matching tool for Angular

Can someone help me create a regular expression that can validate input in the format "S19/999999/090"? I need the input field to accept this specific type of input where the first character is an uppercase letter from A to Z, followed by two digits from 0 ...

javascriptjqueryregexangularvue.js

What methods can I use to minimize the gap between images within the <figure> element?

    Is there a way to adjust the spacing between images when using <figure>? I've been trying to reduce the space, but I can't seem to make it work. I want to display 3 images side by side in one row, but because I'm struggling to ...

htmlcss

Steps for compiling Sass to CSS without encountering any npm errors:

Every time I try to compile SASS into CSS, I encounter the same error message: I keep getting an error that says I need to specify an output directory when compiling a directory. npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! <a href="/cdn-cgi/l/e ...

cssnode.jsnpmsass

What is the best way to ensure your background image appears proportional?

I'm having an issue with the background image on my login page - it doesn't look like the original photo: Take a look at the screenshot to see the problem with the width of the image: https://i.sstatic.net/qb9u0.jpg Here's the HTML/jsx cod ...

htmlcssreactjssass

Exploring the integration of HTML and CSS within the Django framework

Trying to implement a star rating in a specific HTML file The file I am working on is called book_detail.html {% extends "base.html" %} {% load static %} {% block title %} Block Detail Page {% endblock title %} {% block sidenav %} {% for item ...

htmlcssdjangodjango-staticfiles

Is it possible to eliminate the sticky class as you scroll down?

Check out this jQuery code I wrote to remove the sticky class while scrolling down: $(window).scroll(function (e) { if ($('.main_form_wrapper').length != 0) { var window_scroll = $(window).scrollTop(); console.log(window_scro ...

jqueryhtmlcss

Is there a way to dynamically add <td> based on the quantity of values in a JSON object?

I have developed a program that retrieves values from JSON and I aim to display these values in a table. Currently, only the last array value is being displayed in the table even though all values are available in the console. The objective now is to dynam ...

javascriptjqueryjsonhtml