Задача для верстки:
1. Заверстать отдельные слайды таким образом, чтобы их можно было использовать в виде шаблонов с произвольным количеством контента: все уникальные элементы могут быть сгенерированы в произвольном количестве, как на абстрактном сайте. 
2. Структура для каждого слайда: все картинки лежат в одной папке вместе с файлом index.html. Стили и скрипты, а так же подключаемые библиотеки (jquery, jqueryui и т.п.) лежат в отдельной папке. 
3. Весь js код для функционирования слайда находится в одном файле slides.js, лежащем в папке с остальными скриптами.
4. Контент слайда обернут в базовый блок с уникальным идентификатором. 
Для инициализации интерактивных элементов в слайде нужно вызвать соответствующую функцию, передав в неё уникальный идентификатор слайда.
Структура контента- templates  - js    -- jquery1.7.2.js    -- jqueryui.js    -- slides.js  - css    -- slides.css (стили для слайдов)  - images - базовая папка с изображениями    -- slideBg.jpeg    -- ...- slides  -- slide1 (это сама папка со слайдом)    --- index.html - html код слайда    --- image1.jpeg - картинка, используемая в слайде  -- slide2    --- index.html    --- img.png
Приблизительная страктура слайда (index.html):<div  id="slideNumber123">  <div class="mySlideWithSortableList">    <ul class="sortable">      <li>Пункт 1</li>      <li>Пункт 2</li>    </ul>  </div></div>
Приблизительная структура файла slides.css:....mySlideWithSortableList ul{  margin: 20px;}.mySlideWithSortableList ul > li{  font-weight: bold;}...
Приблизительная структура файла slides.js (это общий файл для слайдов):...slideWithSortableList: function(block){  $(block).find('ul.sortable').sortable();  $(block).find('ul > li').click(function(){    ....   })}...
Пример инициализации слайда:slideWithSortableList('#slideNumber123');
Важно: мы точно не знаем, сколько будет контента на каждом слайде. Например, в слайдах с перетаскиванием картинок, этих картинок может быть 3, а может быть 20. Поэтому картинки должны автоматически распределяться по поверхности слайда средствами js.
В сверстанном слайде надо показать разные варианты с произвольным количеством контента.
Пример, как оно должно работать: [url=http://demo.burningheads.ru/wella/v1/]http://demo.burningheads.ru/wella/v1/[/url]

Задача для верстки:
1. Заверстать отдельные слайды таким образом, чтобы их можно было использовать в виде шаблонов с произвольным количеством контента: все уникальные элементы могут быть сгенерированы в произвольном количестве, как на абстрактном сайте. 
2. Структура для каждого слайда: все картинки лежат в одной папке вместе с файлом index.html. Стили и скрипты, а так же подключаемые библиотеки (jquery, jqueryui и т.п.) лежат в отдельной папке. 
3. Весь js код для функционирования слайда находится в одном файле slides.js, лежащем в папке с остальными скриптами.
4. Контент слайда обернут в базовый блок с уникальным идентификатором. 
Для инициализации интерактивных элементов в слайде нужно вызвать соответствующую функцию, передав в неё уникальный идентификатор слайда.
Структура контента- templates  - js    -- jquery1.7.2.js    -- jqueryui.js    -- slides.js  - css    -- slides.css (стили для слайдов)  - images - базовая папка с изображениями    -- slideBg.jpeg    -- ...- slides  -- slide1 (это сама папка со слайдом)    --- index.html - html код слайда    --- image1.jpeg - картинка, используемая в слайде  -- slide2    --- index.html    --- img.png
Приблизительная страктура слайда (index.html):      <ul>      <li>Пункт 1</li>      <li>Пункт 2</li>    </ul>  
Приблизительная структура файла slides.css:....mySlideWithSortableList ul{  margin: 20px;}.mySlideWithSortableList ul &gt; li{  font-weight: bold;}...
Приблизительная структура файла slides.js (это общий файл для слайдов):...slideWithSortableList: function(block){  $(block).find('ul.sortable').sortable();  $(block).find('ul &gt; li').click(function(){    ....   })}...
Пример инициализации слайда:slideWithSortableList('#slideNumber123');
Важно: мы точно не знаем, сколько будет контента на каждом слайде. Например, в слайдах с перетаскиванием картинок, этих картинок может быть 3, а может быть 20. Поэтому картинки должны автоматически распределяться по поверхности слайда средствами js.
В сверстанном слайде надо показать разные варианты с произвольным количеством контента.
Пример, как оно должно работать: <a href="http://demo.burningheads.ru/wella/v1/" rel="nofollow noopener noreferrer" target="_blank">http://demo.burningheads.ru/wella/v1/</a>

Гость guest_147807526804

Программная верстка