Icon and div-based carousel/slider for a unique visual experience

I have a project in progress that requires dynamically displaying icons based on the user's selection. These icons are essentially glyphs with a two-word title underneath them. Essentially, there is an 

<div class="col-md-9">                   //main container for slider
  <i class="some-icon-name"></i>            
  <div class="col-md-3">
    Some title
  </div>  
  --
  <i class="some-icon-name"></i>
  <div class="col-md-3">
    Some title
  </div>
  --
</div>

I am looking to have these icons and their corresponding divs displayed as a slider or carousel. I attempted using owl carousel and replacing img but was unsuccessful. I am utilizing bootstrap and jQuery and have tried creating a custom solution without success.

javascriptjquerycsstwitter-bootstrap

Answer №1

Uncertain if this meets your requirements

<div id="container">
<div id="mySlider" class="slider slide" data-drive="slider">
  <!-- Markers -->
  <ol class="slider-markers">
    <li data-target="#mySlider" data-slide-to="0" class="active"></li>
    <li data-target="#mySlider" data-slide-to="1"></li>
    <li data-target="#mySlider" data-slide-to="2"></li>
    <li data-target="#mySlider" data-slide-to="3"></li>
  </ol>

  <!-- Slides Content -->
  <div class="slider-content" role="playlist">
    <div class="slide active">
      <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
      <span class="label">Search</span>
    </div>

    <div class="slide">
      <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
      <span class="label">Star</span>
    </div>

    <div class="slide">
      <span class="glyphicon glyphicon-ice-lolly" aria-hidden="true"></span>
      <span class="label">Ice lolly</span>
    </div>

    <div class="slide">
      <span class="glyphicon glyphicon-apple" aria-hidden="true"></span>
      <span class="label">Apple</span>
    </div>
  </div>

  <!-- Controls for Navigation -->
  <a class="left slider-navigation" href="#mySlider" role="pusher" data-slide="back">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="hidden-text">Previous</span>
  </a>
  <a class="right slider-control" href="#mySlider" role="pusher" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="hidden-text">Next</span>
  </a>
</div>
</div>

CSS

#container {
  position:relative; 
  overflow:hidden; 
  width:50%
  height: 100%; 
  margin:0px auto; 
  padding:0; 
  background-color:Grey;
  margin-left:150px;
  margin-right:150px
}

.glyphicon {
    font-size: 100px;
}

.label {
    display: block;
}

DEMO

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

Querying data from a label using jQuery

I am facing a challenge with reading label attributes in jQuery. I have multiple labels, each with the same class. These labels contain important information that I need to access. However, despite being able to select the object using $, I am struggling ...

javascriptjquery

``There appears to be an issue with the functionality of the jQuery

I've been experimenting with using AJAX in a PHP form, but for some reason it's not working as expected. I'm at a loss trying to figure out why. Here is my code: <!DOCTYPE html> <html lang="es"> <head> <title>< ...

javascriptphpjqueryajax

Utilizing Javascript to work with an xPath XML file that contains namespaces

I've been through a mountain of research and I'm still stuck at a dead-end :( Check out my XML file (test.xml): <bookstore> <book genre="autobiography"> <title>The Autobiography of Benjamin Franklin</title> ...

javascripthtmlxmlxpathnamespaces

select a date (excluding dates that are invalid)

Hey everyone, I'm facing an issue with my datepicker. I have disabled weekends, but users are still able to manually input a weekend date. $("[name=startdatecontract]").datepicker({ minDate : 2, beforeShowDay: $.datepicker.noWeekends }); I ...

javascriptjquerydatepicker

Fluid percentage-based layout

I have four separate Divs that I would like to position on my page in a specific layout. Here is an image showing how I want them positioned: https://i.sstatic.net/KBZ1U.png In the future, I plan to add multiple svg files to Div 4 and I want it to be scro ...

htmlcss

If there is a value in the array that falls below or exceeds a certain threshold

Imagine you have a set number of values stored in an array and you want to determine if any of them fall above a certain threshold while also being below another limit. How would you achieve this? Provide a solution without resorting to using a for loop o ...

javascriptarraysif-statement

Tips for capturing a webpage thumbnail using a combination of jQuery and PHP from a specified link

Is there a way to capture a web page thumbnail using jQuery and PHP for a specific link? Imagine if I were to assign a PHP variable like this: $screen="http://www.yahoo.com" Can we implement the use of AJAX, jQuery, and PHP to display a thumbnail of the ...

phpjavascriptjqueryajax

Removing the column name from a JSON return in C# involves using a variety of techniques

Below is a JSON output I have received : [ { positionCode: "POS1", positionName: "POSITION 1", positionDescription: "", parentPosition: "POS2", }, { positionCode: "POS2", positionName: "POSITION ...

javascriptc#arraysjsonapi

Using Node.js for building a single-page web application

Currently, I am exploring the use of express.js for the backend and JavaScript on the client side for my single page web application. My main concern is about how routing works in express. Should routing be used to bridge the gap between the user interfac ...

javascriptajaxjsonnode.jsexpress

Navigating to the top of a concealed container

I have been attempting to scroll a hidden div to the top without success. Below is the code snippet I've been using: function slideUpReset(div) { $(div).slideUp('fast', function() { $(div).scrollTop(0); }); } Unfortunately ...

javascriptjquery

Tips for effectively incorporating a loop within a promise chain

I am currently constructing a promise chain, and I must admit that I am fairly new to this concept. What I aim to accomplish is the ability to handle errors in any specific function by waiting for a second and then retrying until it eventually succeeds, al ...

javascriptnode.js

Tips for implementing an HTML modal with AngularJS binding for a pop up effect

As a beginner in AngularJS, I am facing a challenge. I have an HTML page that I want to display as a pop-up in another HTML page (both pages have content loaded from controllers). Using the router works fine for moving between pages, but now I want the s ...

javascriptjqueryhtmlangularjsangularjs-ng-repeat

Filter an object by an array and display it based on this array using Viewjs

Trying to filter an object from an array using another array in a JSON feed that has one array with objects and object within objects: members = [ { id: 1, name: "Ruta" }, { id: 2, name: "Paul" ...

javascriptarraysvue.jsobject

Vertical Scrollbar Height for Div

My current page has a layout similar to this: I want the vertical scrollbar to always be visible when the content exceeds the page size. The horizontal scrollbar should remain at the bottom of the browser window, like in the following example: How can I ...

jquerycsshtml

Verify if the upcoming element possesses a particular class

Here is the HTML structure: <div class="row"> <div class="span"></div> <div class="span"></div> <div class="navMenu"> <ul> <li><a href=#">Link 1</a></li> ...

javascriptjquery

unable to submit form using angular and express

I am encountering an issue with a post request in AngularJS to express. The HTML form on the client side is defined as follows: <div ng-controller="LoginCtrl"> <form ng-submit="login()"> <div> <label>Username</lab ...

javascriptangularjsnode.jsexpresspassport.js

when a choice is made

UPDATE: Oops, I forgot to include "http://" in the links. That's not what's causing my issue though. Let me correct the question... I have a few options, like so: <select class="mySelect"> <option value="http://www.url1.com">Url ...

javascriptjquery

What is the best way to extract the text from dynamically created buttons using JavaScript?

Is there a way to retrieve the text displayed on a button when it is clicked? The buttons are created in a document fragment and then added to the page. I have attempted to create a function that captures the text, but when I click a button, nothing shows ...

javascripthtmlfunction

What is the best way to implement jQuery on an HTML file instead of relying solely on the Document Object Model

My attempt to make modifications to an HTML document has been challenging, as it differs from working with the DOM. I've realized that the syntax I typically use with the DOM doesn't translate well to this other document. For instance, while I co ...

javascriptjquery

Ensure accuracy when converting to a float data type

My dilemma involves sending numerical values to a server using an AJAX call. For instance, numbers like 0.77, 100, and similar variations are being transmitted. However, upon reaching the server, the data is being interpreted differently - 0.77 as a double ...

javascript