Карусель на jquery

@Kiruxa · Регистрация: 31.01.2011

Студворк — интернет-сервис помощи студентам

Всем привет.
Подскажите возможна ли реализация слайдера-карусели на jquery? В инете находятся только длинющие скрипты на js, которые я пока не в силах разобрать и успешно подключить к шаблону.
Буду благодарна если кто-то сможет подсказать решение.

@Refactor · 18.09.2012, 01:41

Сообщение от Kiruxa

слайдера-карусели

вы хоть пример покажите как это выглядит хоть примерно

@Kiruxa · 18.09.2012, 01:58 **[ТС]**

Вот пример http://www.onextrapixel.com/ex... el-plugin/

Добавлено через 2 минуты
Ошиблась с ссылкой. Вот пример http://www.onextrapixel.com/ex... el-plugin/

Добавлено через 1 минуту
http://www.onextrapixel.com/ex... el-plugin/

Добавлено через 6 минут
http://ruseller.com/lessons.php?rub_id=32&id=1275
Вот что-то на подобие (только верхняя часть примера, там где крутятся маленькие картинки).

@Refactor · 18.09.2012, 02:02

вы ж мне сами и ответ показали

, там же можно сразу и скачать, ничего там сложного нет:

сделайте на своей странице все как в примере, подсоедините в хеадере:

JavaScript
1
2
3
4
5
6
7
8
9
10
<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="index.css" /> 
<script type="text/javascript" src="click-carousel.js"></script>
<script type="text/javascript">
$(function(){
    $("#container").clickCarousel({margin: 10});    
});
</script>  
</head>

а в нужное вам место в боди запихните это:

HTML5
1
2
3
4
5
6
7
8
9
10
11
<div id="wrapper"> 
    <div id="container">    
        <img src="img1.jpg" alt="Cuba" />
        <img src="img2.jpg" alt="Cuba" />
        <img src="img3.jpg" alt="Cuba" />
        <img src="img4.jpg" alt="Cuba" />
        <img src="img5.jpg" alt="Cuba" />
    </div><!-- container -->
    <img id="carouselLeft" src="leftArr.jpg" alt="Left Arrow" />
    <img id="carouselRight" src="rightArr.jpg" alt="Right Arrow" />
</div><!-- wrapper -->

тут в архиве все есть (я его там и скачал)
clickCarousel.zip

@Kiruxa · 18.09.2012, 02:23 **[ТС]**

спасибо, я попробую.

@Kiruxa · 19.09.2012, 14:59 **[ТС]**

Задача поставить два одинаковых слайдера на одну страницу, причем стили для переключателей должны быть разные. Переключатели добавляются на страницу js-кой, вот кусочек скрипта с переключателями:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
_addControls        : function() {
            
            this.$navNext   = $('<span class="es-nav-next">Next</span>');
            this.$navPrev   = $('<span class="es-nav-prev">Previous</span>');
            $('<div class="es-nav_b"/>')
            .append( this.$navPrev )
            .append( this.$navNext )
            .appendTo( this.$el );
            
            //this._toggleControls();
                
        },

Как поменять стили для переключателей у второго слайдера и оставить их прежнюю функциональность? Создать еще две переменных $nav, продублировать для них структуру скрипта и стили? Может есть еще какое-нибудь другое решение?

@Refactor · 20.09.2012, 03:00

тогда лучше возьмите этот карусель

carousel.zip

тут тоже ничего сложного в установке нет, просто сделайте примерно такие шаги которые вы делали при установке выше описанного каруселя и перенесите папки на ваш сайт относительно страницы примера в архиве.

Новые блоги и статьи Все статьи Все блоги /
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

@Kiruxa 28 / 28 / 12 Регистрация: 31.01.2011 Сообщений: 311

	Карусель на jquery 18.09.2012, 00:00. Показов 3447. Ответов 6 Метки нет (Все метки) Всем привет. Подскажите возможна ли реализация слайдера-карусели на jquery? В инете находятся только длинющие скрипты на js, которые я пока не в силах разобрать и успешно подключить к шаблону. Буду благодарна если кто-то сможет подсказать решение. 0

@Kiruxa 28 / 28 / 12 Регистрация: 31.01.2011 Сообщений: 311
	18.09.2012, 01:58 [ТС]
	Вот пример http://www.onextrapixel.com/ex... el-plugin/ Добавлено через 2 минуты Ошиблась с ссылкой. Вот пример http://www.onextrapixel.com/ex... el-plugin/ Добавлено через 1 минуту http://www.onextrapixel.com/ex... el-plugin/ Добавлено через 6 минут http://ruseller.com/lessons.php?rub_id=32&id=1275 Вот что-то на подобие (только верхняя часть примера, там где крутятся маленькие картинки). 0

@Kiruxa 28 / 28 / 12 Регистрация: 31.01.2011 Сообщений: 311
	18.09.2012, 02:23 [ТС]
	спасибо, я попробую. 0

@Refactor 96 / 89 / 29 Регистрация: 05.03.2010 Сообщений: 231
	20.09.2012, 03:00
	тогда лучше возьмите этот карусель carousel.zip тут тоже ничего сложного в установке нет, просто сделайте примерно такие шаги которые вы делали при установке выше описанного каруселя и перенесите папки на ваш сайт относительно страницы примера в архиве. 1