Adjust the arrow's height automatically based on the content's height in Liquid Slider

https://i.sstatic.net/sPYIA.jpg https://i.sstatic.net/az5wf.jpg

The position of the arrows does not adjust automatically based on the content height when navigating to the next slide.

I am looking for a solution that enables dynamic arrow height, allowing it to be displayed in the center of the content.

I have consulted the code from Liquid Slider, which you can view here or see my issue below. I would greatly appreciate any advice or suggestions. Thank you!

$('#slider-id').liquidSlider({
  hoverArrows: false,
dynamicArrows: true,
});
[class$="-arrow"] {
  width: 25px;
  height: 25px;
  background-image: url(../images/arrow.png);
  background-repeat: no-repeat;
  margin-top: 40% !important;
  position:relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.4/jquery.touchSwipe.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Responsive-jQuery-Content-slider-with-HTML5-Liquid%20Slider/js/jquery.liquid-slider.min.js"></script>
<link href="https://www.jqueryscript.net/demo/Responsive-jQuery-Content-slider-with-HTML5-Liquid%20Slider/css/liquid-slider.css" rel="stylesheet"/>

<div class="liquid-slider"  id="slider-id">
  <div>
    <h2 class="title">Panel 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
  </div>
  <div>
    <h2 class="title">Panel 2</h2>
    <p>Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.</p>
  </div>          
  <div>
    <h2 class="title">Panel 3</h2>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
  </div>
  <div>
    <h2 class="title">Panel 4</h2>
    <p>Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
  </div>
</div>

javascriptjqueryhtmlcssslider

Answer №1

To customize the arrows CSS, adjust the margin-top to 0 and set the top to 50% using the following code snippet:

[class$="-arrow"] {
    ....
    top:50%;
    margin-top:0 !important;
    ...
}

Check out the example below: 

$('#slider-id').liquidSlider({
  hoverArrows: false,
dynamicArrows: true,
});
[class$="-arrow"] {
  width: 25px;
  height: 25px;
  background-image: url(../images/arrow.png);
  background-repeat: no-repeat;
  top:50%;
  margin-top:0 !important;
  position:relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.4/jquery.touchSwipe.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Responsive-jQuery-Content-slider-with-HTML5-Liquid%20Slider/js/jquery.liquid-slider.min.js"></script>
<link href="https://www.jqueryscript.net/demo/Responsive-jQuery-Content-slider-with-HTML5-Liquid%20Slider/css/liquid-slider.css" rel="stylesheet"/>

<div class="liquid-slider" id="slider-id">
  <div>
    <h2 class="title">Panel 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget...
   </div>
  <div>
    <h2 class="title">Panel 2</h2>
    <p>Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.</p>
  </div>          
  <div>
    <h2 class="title">Panel 3</h2>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi...
   </div>
  <div>
    <h2 class="title">Panel 4</h2>
    <p>Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim...
   </div>
</div>

Answer №2

Just sharing some insights here. I made adjustments to remove the top margin and include positioning for the slider arrows.

$('#slider-id').liquidSlider({
  hoverArrows: false,
dynamicArrows: true,
});
[class$="-arrow"] {
  width: 25px;
  height: 25px;
  background-image: url(../images/arrow.png);
  background-repeat: no-repeat;
  margin-top: 0;
  position:relative;
  top: 50%;
}

.liquid-slider-wrapper .liquid-nav-left-arrow, .liquid-slider-wrapper .liquid-nav-right-arrow {
margin-top: 0 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.4/jquery.touchSwipe.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Responsive-jQuery-Content-slider-with-HTML5-Liquid%20Slider/js/jquery.liquid-slider.min.js"></script>
<link href="https://www.jqueryscript.net/demo/Responsive-jQuery-Content-slider-with-HTML5-Liquid%20Slider/css/liquid-slider.css" rel="stylesheet"/>

<div class="liquid-slider"  id="slider-id">
  <div>
    <h2 class="title">Panel 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
  </div>
  <div>
    <h2 class="title">Panel 2</h2>
    <p>Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.</p>
  </div>          
  <div>
    <h2 class="title">Panel 3</h2>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
  </div>
  <div>
    <h2 class="title">Panel 4</h2>
    <p>Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
  </div>
</div>

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

Is there a way to use regular expressions to search for class names within nested div elements?

I'm struggling to find nested divs like these in my document object model (DOM) <div class="two-columns some-other-class"> <div class="two-columns some-other-class"> </div> </div> I attempted to search for neste ...

javascriptjqueryhtmlregex

I require a picture to fill up as much space as possible, regardless of its initial dimensions

As I work on my react-native app, I encounter a challenge regarding the layout. My application consists of a top bar and a bottom bar with an image in between. The image needs to fill up as much space as possible without overlapping the bars. Despite numer ...

cssreact-nativeflexbox

Troubleshooting an issue: Why is my Ajax get request

Here is a sample url structure: http://11.11.11.11/url/index.php?data={method:method_name,params:{param1:value,param2:value,}} I need to send data from a Backbone view to an AJAX class with the following format: define(['jquery', 'backb ...

jqueryajaxbackbone.js

Exploring MongoDB: determining the frequency of shared values among a group of documents

I have a dataset with two fields and I am looking to determine the count of common values within the same category of rows: The current data is represented in JSON format like this: https://i.sstatic.net/LIToV.png I am seeking an output similar to this: ...

javascriptarraysmongodbmongodb-query

Issue with handling 'this' in submit function in Sencha touch/JavaScript not resolved

I am currently working on developing a form using Sencha Touch that is designed to allow users to enter text and conduct a job search on a website. While most of the functionality is in place, including the reset button, I encounter an error when attemptin ...

javascriptsencha-touch

Issue: Unable to reach essential Node.js modules

After attempting to deploy Next.js on Cloudflare Pages, I encountered the following error: Error: Could not access built-in Node.js modules. It is recommended to ensure that your Cloudflare Pages project has the 'nodejs_compat' compatibility flag ...

javascriptnext.jscloudflare-pages

Is it possible to transfer an image from the client to the NodeJS server and store it locally within the server itself?

Is there a way for me to upload an image from the client side, send it via an HTTP request (POST) to the server (NodeJS), and save it internally on the server? Whether using Jquery, XMLHttpRequest, or a form, I continue to face the same issue where I can& ...

javascriptnode.js

HTML or JS/jQuery can create disorienting cursor behaviors

Is there a way to create a distorted or crooked mouse movement on a webpage, even though the user is moving the mouse normally? I'm exploring ways to simulate the experience of a Parkinson's or arthritic patient trying to navigate a web page wit ...

javascriptjqueryhtmlcss

Angular.js filter issue: "Error: textProvider is not recognized provider"

I implemented a custom filter for my AngularJS project that is similar to the one in this fiddle http://jsfiddle.net/tUyyx/. myapp.filter('truncate',function(text,length){ var end = "..." text = text.replace(/\w\S*/g, function( ...

javascriptangularjs

Best practices for utilizing an enum in JavaScript objects

In the past, I would create classes with a type property in traditional OOP languages such as Swift or Java: struct ClassA { enum Type { case b, c, d } var type: Type } and then use it like this: let a = ClassA(type: .b) In ES6, a ...

javascriptenums

Conceal certain options by utilizing multiple select criteria

I currently have a set of 3 select objects available. Colleges <select id="collegeSelect" size="8" multiple> <option value="1" >Harvard</option> <option value="2" >Stanford</option> <option value="3" >Yale& ...

javascriptjquery

What is the best way to prevent content from jumping around on a webpage?

After implementing a sticky header on scroll, I encountered an issue. When scrolling down by 1000px, the 'sticky' class is added to the header causing a slight jump in the content. This may be due to the header no longer visually existing in that ...

javascriptjquerycss

Using Vuejs to implement scrolling to the top of a specific div element

I have a division containing text, and when I submit that text, new data is obtained from the server. If I happen to be at the bottom of the original text, the newly received text also appears at the bottom. Ideally, I would like the page to scroll up to ...

javascriptvue.js

Obtain HTML controls in the code-behind of an ASP.NET application

Is it possible to access HTML changes made with JavaScript in ASP.NET code behind? I came across some dhtml "drag and drop" code online (), but I'm struggling to access the updated controls in my code behind after moving items between lists. I attem ...

javascriptjqueryasp.netajax

Perform an action if the element has a class that matches the ID of the clicked element

Looking for a solution where clicking a menu item filters images on the screen based on their class? Here is the code snippet I've been working with: var imgFilterBtn = $("nav > ul > li > ul > li > a"); imgFilterBtn.click(function() { ...

jqueryclassfilter

Tips for maintaining the visibility of the dynamic submenu while hovering over either the parent menu or submenu in vuejs

I'm currently working on a dynamic sidebar in vuejs and I need some assistance. The issue I'm facing is that I want the submenu to remain open when hovering over either the parent menu or the submenu itself. However, when I move the mouse away fr ...

javascripthtmlcssvue.jsvuejs2

What is the best way to organize the table by date when not all dates are filled in?

**Issue with React-Table Sorting:** I'm encountering an issue with my React-Table implementation. I am using version 7 of the plugin. { Header: 'DATE', accessor: 'DATE', sortType: (rowA, rowB) => { ...

javascriptreactjsdatereact-table

Angular: Customizing table cell color based on condition

I am having trouble with changing the cell color of an object in my html table if a certain variable changeColor is true. I am utilizing angular for this task. <tr ng-repeat="list in results"> <% if (!{{list.changeColor}} ) %> <% { ...

htmlangularjshtml-tablebackground-color

Stream of information that triggers a specific action based on a specified condition

I'm dealing with an observable stream where I need to make two calls after retrieving the initial object using two id's found within the object. One of these id's, siteId, is optional and may or may not be present. If it is present, I need t ...

javascriptangularrxjsobservable

Using the default object as a parameter in an ES6 function call is successful, whereas simply passing it as a

Why does this code work while the other one doesn't? import React from 'react' import './Card.scss' export default ({ type = 'single' }) => ( <div>{type}</div> ) Can you explain why the following code ...

javascriptreactjsecmascript-6