Implement a vertical scrollbar in Jssor when the page exceeds the visible length

I came across an article discussing a jssor slider thumbnail scrollbar, but unfortunately it did not provide a valuable answer (jssor slider thumbnail scrollbar). Essentially, I am looking to have a vertical scrollbar appear if the content extends beyond the page length. My initial thought was to use "overflow-y: scroll;", however this caused the page to extend beyond the content container's end. Ideally, I would like the content container to automatically add a vertical scrollbar when it is longer than the page, or alternatively, can I apply "overflow-y : scroll;" to a specific div within the container?

Has anyone found a solution that works? The example provided in the article will not suit my needs as I do not want the page to scroll vertically, only horizontally.

Looking forward to hearing any suggestions!

jqueryhtmlcssjssor

Answer №1

let sliderOptions = {

    autoPlay: true,                                   //[Optional] Whether to enable auto play for slideshow
    dragOrientation: 1                                //[Optional] Orientation for dragging slide: 0 no drag, 1 horizontal, 2 vertical, 3 either
};

let jssorSlider = new $JssorSlider$("sliderContainer", sliderOptions);

jssorSlider.$On($JssorSlider$.$EVT_POSITION_CHANGE, function (position, fromPosition) {
    // This event is triggered while sliding
});

jssorSlider.$On($JssorSlider$.$EVT_PARK, function (slideIndex, fromIndex) {
    // This event is triggered when switching to another slide
});

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

The HTML image is not updating, the function does not appear to be triggering

My attempt to add a source to an image using JavaScript and some jQuery code I found online isn't working as expected: <html> <head> <script src = "http://www.example.com/images/"> var count=1; var initnumber=100 ...

javascriptjqueryhtml

Creating a smooth transition for an element's width change as a neighboring element shows or hides using v-show

I'm working on a Vue.js application with tailwind styling. Within a flex parent container in my template, I have two child elements - one is always present, and the other is conditionally rendered using v-show. The issue arises when the conditional e ...

cssvue.jsvuejs3tailwind-css

Creating margins that dynamically adjust based on screen resolution

I need the margins to adjust based on the screen resolution. On my 1920x1080 computer, everything looks good. However, on my tablet with a smaller resolution, things start to overlap and look strange. My ideal solution would be for the text to either get ...

htmlcss

Remove HTML tags from text using JavaScript and replace break tags with line breaks within a textarea

Looking for the optimal approach to importing styled HTML text into an input textarea using jQuery. Is it recommended to first remove the tags and then eliminate other formatting elements like bold, italic, or images? ...

javascriptjqueryregex

Library for visualizing JavaScript code using flowcharts and diagrams

Is there a jQuery-based javascript library available for client-side rendering and manipulation of flow-charts? I am open to other options as well. This question has been previously posed, but has not been revisited in a few years. Hopefully, there are ne ...

javascriptjqueryworkflowflowchart

Tips on assigning a value to a dynamically generated drop-down element

I used arrays of strings to populate drop-down menus. Is there a way to automatically set the value of each option to match the text content? el.value = opt; seems to be ineffective. var validCoursesKeys = ['opt 1','opt 2','opt ...

javascripthtml

Enhancing Element Visibility with CSS Centering

HTML <div class="container1"> <ul class="menu-dropdown"> <li>item</li> </ul> <div> CSS .menu-dropdown{ display: none; } .container1:focus .menu-dropdown{ display: block; } I am attempting to cr ...

htmlcssfocus

AJAX request made to a specific local directory, instead of the usual localhost

Currently, I am working on a project to create a database that can be filtered using various options. My approach was to keep it simple by using HTML for sliders and checkboxes, along with JavaScript/jQuery for filtering the results. This setup allows me t ...

javascriptjqueryajax

Hold off on advancing until the particular text is found in the DOM element

One of the challenges I'm facing is creating a function that waits for specific text to change before returning a value: function getElementText() { while(isLoading()) { } return $('#element').text(); } function isLoading() { ...

javascriptjquery

Issues with the animation of letters bouncing in css3

I wanted to implement an animated effect in CSS, specifically the "jumping letters" effect. However, it seems that the current implementation is not working as intended. The entire word moves upward instead of each letter bouncing individually. Can you h ...

htmlcss

Load and Activate Element

I am utilizing Bootstrap 4 features and some custom settings in my elements. <div class="btn-group btn-group-toggle" data-toggle="buttons"> <label class="btn btn-outline-selector make-active"> <input ...

htmlcssbootstrap-4

JavaScript dialog on top of a flash video

I have a unique system in place: Upon opening the main site, a flash image gallery appears. When a user clicks on an image, I utilize Flash's "ExternalInterface.call" function to invoke a JavaScript function that opens a Java dialog modal called NyroM ...

javascriptjqueryajaxflashdialog

parsing links from HTML tag

I am trying to extract the img src tag from an HTML request that includes the following element: <img src="https://pbs.twimg.com/media/...." alt="Embedded image permalink"</a> My goal is to retrieve only the URL. Currently, I might be going too ...

jquerynode.jscheerio

Is CSS General sibling selector not functioning properly when used with :focus?

How can I display text that turns into an input form when hovered over, and stays visible even if it's unhovered but the user is interacting with the input form? The issue is that when the input form is focused while unhovered, both the input form an ...

cssfocus

Using jQuery and AJAX to fetch the return value of a PHP class method

Starting a new project for myself has been quite the learning experience. As someone who isn't the most skilled programmer, I decided to kick things off in PHP. However, I quickly realized that executing PHP functions and class methods through HTML bu ...

javascriptphpjqueryhtmlajax

Verify the availability of internet connection in Office task pane applications

I have developed an office app task pane that requires internet connectivity to function properly. To prevent the app from crashing, I need to implement a check to verify if the device is connected to the internet. While I have looked at similar inquiries ...

javascripthtmlvisual-studio-2012office-app

Retrieve data from a JSON object and incorporate jQuery autocomplete functionality

Extract the values from the ajax response in JSON object format and utilize jQuery autocomplete to create an autocomplete box. { "consignmentList" : [ "" , "AAA" , "ABC" , "BHU" , "MAN" , "WER" , "ZXC"]} $(document).ready(function() { $("input#autoT ...

javascriptjqueryajaxjsonjquery-ui

Can two sibling elements collaborate and influence each other?

Imagine having two elements in your website, named "A" and "B". You want to create a unique interaction where hovering over A changes the color of B, and hovering over B changes the color of A. <ul> <li>A</li> <li>B</li& ...

csscss-selectors

The font cannot be located by font-face: file not found

I am a beginner in CSS and want to incorporate the fonts poppins and open-sans in doxygen. Here is my font-face code for Open_Sans: @font-face { font-family: 'Open_Sans'; src: url('fonts\Open_Sans\OpenSans-Regular.ttf& ...

htmlcssfontsfont-facedoxygen

Ways to conceal page navigation bar and header on a particular page

Is there a way to build a page without the navigation bar and header, but have them visible on all other pages? I attempted to achieve this by adding the following code to the .css file for the specific page: .navbar-custom { display: none; visibility ...

htmlcss