Как создать базовый слайдер с помощью jQuery Mobile?

Опубликовано: 22 Декабря, 2021

jQuery Mobile - это веб-технология, используемая для создания адаптивного контента, доступного на всех смартфонах, планшетах и настольных компьютерах. В этой статье мы создадим базовый слайдер с помощью jQuery Mobile.

Подход: добавьте скрипты jQuery Mobile, необходимые для вашего проекта.

<link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css” />
<script src=”http://code.jquery.com/jquery-1.11.1.min.js”></script>
<script src=”http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js”></script>

Пример: мы создадим базовый слайдер с помощью jQuery Mobile. Ползунок - это тип ввода для вставки данных с помощью ползунка. Мы используем атрибут type = ”range” с элементом <input> для создания слайдера.

HTML

 <!DOCTYPE html>
 < html >
 
< head >
    < link rel = "stylesheet" href =
 " http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css " />
 
    < script src =
        " http://code.jquery.com/jquery-1.11.1.min.js " >
    </ script >
 
    < script src =
 " http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js " >
    </ script >
 </ head >
 
< body >
    < center >
        < h1 >GeeksforGeeks</ h1 >
 
        < h4 >
            Design a Basic Slider using
            jQuery Mobile
        </ h4 >
 
        < form style = "width: 50%;" >
            < label for = "slider" >Basic Slider:</ label >
             
            < input type = "range" name = "slider"
                id = "slider" min = "0" max = "100" value = "30" >
        </ form >
    </ center >
 </ body >
 
</ html > 

Выход:

JQuery

Как создать базовый слайдер с помощью jQuery Mobile?

HTML

РЕКОМЕНДУЕМЫЕ СТАТЬИ