What are some creative ways to incorporate text into a slider design?

I have a box with 3 links and a fontawesome icon in my code snippet. I want to be able to click on the font icon and make the content slide. Initially, only three links should be shown, but when I click on the arrow, it should display the other icons. When I click on a link, it should show its respective content and hide any other displayed content. Note that I can only have 3 links visible at a time.

If you can help, please do so.

Here is my initial HTML markup:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<div class="bar">
  <div class="latest-games">
    <a href="">Latest Games</a>
  </div>
  <div class="progressive">
    <a href="">Progressive</a>
  </div>
  <div class="video">
    <a href="">Video</a>
  </div>
  <i class="fa fa-angle-right" aria-hidden="true"></i>
</div>

Here is my styling:

.bar{
    background-color: black;
    display: flex;
    padding: 10px 0;
    justify-content: center;

    a{
        text-transform: uppercase;
        font-weight: bold;
    }

    & > div{
        width: 30%;
        justify-content: center;
        text-align: center;
    }
    i.fa.fa-angle-right {
        margin-top: 4px;
        color: white;
    }
}

Unfortunately, I'm not sure how to get started as my previous sites were created using WordPress, where I relied on plugins for jQuery functionality. Unfortunately, this isn't possible with wordpress right now due to some bad luck.

Here is a link to my codepen: http://codepen.io/Sidney-Dev/pen/qqbojV

jqueryhtmlcsssass

Answer №1

Although my jQuery skills are not the most advanced, I have put together a code snippet for you to review and hopefully gain some insight on how to enhance it further:

HTML:

<div class="bar" id="slider">

  <div class="latest-games item">
    <a href="">Latest Games</a>
  </div>
  <div class="progressive item">
    <a href="">Progressive</a>
  </div>
  <div class="video item">
    <a href="">Video</a>
  </div>
   <div class="latest-games item">
    <a href="">Latest Games</a>
  </div>
  <div class="progressive item">
    <a href="">Progressive</a>
  </div>
  <div class="video item">
    <a href="">Video</a>
  </div>
   <div class="latest-games item">
    <a href="">Latest Games</a>
  </div>
  <div class="progressive item">
    <a href="">Progressive</a>
  </div>
  <div class="video item">
    <a href="">Video</a>
  </div>
  <i class="fa fa-angle-right" aria-hidden="true"></i>
</div>

SCSS:

.bar{
    background-color: black;
    display: flex;
    padding: 10px 0;
    justify-content: center;

    a{
        text-transform: uppercase;
        font-weight: bold;
    }

    & > div{
        width: 30%;
        justify-content: center;
        text-align: center;
    }
    i.fa.fa-angle-right {
        margin-top: 4px;
        color: white;
    }
}

jQuery:

$(document).ready(function() {

  $("#slider").owlCarousel({

      autoPlay: 3000, //Set AutoPlay to 3 seconds
       items : 3,
      itemsDesktop : [1199,3],
      itemsDesktopSmall : [979,3]

  });

});

Wishing you the best of luck!

Answer №2

Utilizing a jquery plugin is essential. Simply incorporate the necessary files and you'll be all set.

For guidance on getting started, check out this resource:

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

Storing a selected value in the database using Laravel Blade

Attempting to save information from a select field to the database. Tested this method: <div class="form-group"> <label>Type</label> <input style="width:10%" type="text" name="type" class="form-control" value="{{$findBook-& ...

htmllaravelbootstrap-4laravel-blade

Looking for assistance with arranging and managing several containers, buttons, and modals?

My goal is to create a grid of photos that, when hovered over, display a button that can be clicked to open a modal. I initially got one photo to work with this functionality, but as I added more photos and buttons, I encountered an issue where the first b ...

javascripthtmlcssbuttonmodal-dialog

Creating a Full-Width Search Input in Bootstrap 4 Navbar

Is there a way to extend the search input width to 100% in the navbar? https://i.sstatic.net/R1Nyi.png The search input field currently has a limited width: <nav class="navbar navbar-light navbar-dark bg-inverse"> <a class="navbar-brand" href ...

cssinputbootstrap-4navbar

Personalize the position of the v-select drop-down menu

I am currently working with the vuetify v-select component. The problem I am encountering is that instead of the dropdown opening downwards, I need it to open upwards since the dropdown is positioned at the bottom of the page which causes some of the dro ...

cssvue.jsvuetify.js

Loss of styling is observed with jQuery's html() function

Here is the HTML code I am working with: <div class="myList"> <select> <option value="1">Item1</option> <option value="2">Item2</option> </select> </div> Everything looks great in terms of CS ...

htmlcssajax

Using HTML5 and an ASP.NET web method to allow for file uploads

My attempt to upload a file to the server using an HTML5 input control with type="file" is not working as expected. Below is the client-side JavaScript code I am using: var fd = new FormData(); fd.append("fileToUpload", document.getElementById(&ap ...

c#javascriptasp.nethtml

Looking to refine your search in materialize css/bootstrap when utilizing cards?

I recently embarked on a project to create an HTML page utilizing Materialize CSS and Bootstrap. My goal was to incorporate cards representing YouTube videos, along with a search bar that could filter through the cards and display the relevant one. However ...

javascripthtmlcssbootstrap-4materialize

Verify the response retrieved from the ajax call and conduct a comparison

I'm struggling with the following code. Whenever I submit a form, I want to display a modal view. The modal view is functioning correctly, but it keeps showing the same one every time I submit. The #status1 returns a modal view with success markup a ...

jqueryajax

AngularJS drag-and-drop functionality for creating and rearranging lists

I am in need of a drag and drop list feature using angular, but the $scope.list must also be updated as I have to save the new order in my database. I came across this helpful answer and utilized it to create this http://jsfiddle.net/aras7/9sueU/1/ var m ...

jqueryangularjslistjquery-uidrag-and-drop

The MVC5 Web Application is experiencing visual issues when being accessed on the intranet post deployment

After deploying an MVC5 Web Application on a server running IIS7, the site appears correctly when accessed from the server's IE10 browser. However, viewing it from another machine's IE10 on the same network results in the site becoming distorted, ...

cssc#-4.0iis-7asp.net-mvc-5

Use CSS height:auto for every element except SVG

Is there a way to scale all images on my site while excluding SVG files using native CSS? .myClass img { height: auto; } I have tried the following, but it only targets SVG files: .myClass img[src$=".svg"] {height: auto;} Using != doesn't seem ...

css

Is there a way to incorporate a delete button for each li element that is included in my list?

I have successfully implemented a to-do list where clicking on an item strikes a line through it and there is a delete button that works. However, I am looking for assistance on how to create a delete button for each newly added li item. var button = do ...

javascripthtmlcss

Disabling the button add-ons functionality in Bootstrap 3 for mobile devices

I am facing a challenge with my website that has a visually appealing jumbotron and an enticing email signup call to action bar. The issue arises from the fact that my site is bilingual, catering to both German and English speakers, causing confusion with ...

htmlresponsive-designtwitter-bootstrap-3

The code for implementing the "Read More" feature is not functioning as intended

I have been experiencing an issue with the implementation of the "read more" feature on my website. Although the code seems to be functioning properly, it only works after pressing the read more button twice. This particular code is designed to detect the ...

javascriptjquerywordpress

What is the method for obtaining the value of a label?

<div id="xyz"> <table id="quantityTable"> <tr> <td> <asp:Label ID="qtyValue" runat="server"></asp:Label> </td> </tr> </table> </div ...

jqueryasp.net

Can you tell me if there is a switch available for hover or mouse enter/mouse leave functions?

I have a series of div elements, each containing several nested div elements. I would like to add hover effects to these div elements. However, I am unsure whether to use the hover or mouseenter function. For instance, when hovering over a div, I want it t ...

javascriptjqueryhtmlcss

Is there a way to initiate an Angular event when clicking on an HTML input element within a Bootstrap 4 input-group?

Within my Bootstrap 4 input group, there is a prepended title along with two input fields. The structure looks like this: <div class="input-group" (click)="openDoc()"> <div class="input-group-prepend input-group-prepend-split rounded-0" ...

htmlcssangularbootstrap-4

Can you guide me on how to adjust the correct view on my controller?

After successfully inserting data using jQuery AJAX within a modal, I am encountering a problem where the view appears differently than expected. Below is a snippet of my AjaxCrudController: public function store(Request $request) { // $create = ...

jqueryajaxlaravelmodal-dialog

Wookmark js isn't designed to generate columns from scratch

I am attempting to utilize the Wookmark jQuery plugin in order to create a layout similar to Pinterest. However, I am encountering an issue where Wookmark is not creating columns within the li elements, instead it is simply stacking images on top of each o ...

javascriptjqueryhtmlcss

Mismatched photo caption positioning beneath image (html, CSS)

Question from a beginner: I'm attempting to position a photo on the right side of a webpage, with text wrapping around it on the left, and the photographer credit directly under the photo. The issue is that the credit is appearing on the left side ab ...

htmlcssfigcaption