Добре дошли!

Добре дошли в нашите форуми, пълни с полезна информация. Имате проблем с компютъра или телефона си? Публикувайте нова тема и ще намерите решение на всичките си проблеми. Общувайте свободно и открийте безброй нови приятели.

Моля, регистрирайте се за да публикувате тема и да получите пълен достъп до всички функции.

Имплементиране на Carousel

Нова тема

20 октомври 20169 г.

Здравейте,

Използвал съм готови carousel-и, обаче реших че искам да си създам собствен написан само на Js и jQuery. Имам работеща логика без анимиране, но тъй като искам да изглежда елегантно като модерните се оптивам при натискане на бутона за следваща или предишна снимка да се сменяват с анимация или транзиция Пробвах с транцизия, но не стана, а с анимация става полувинчато и обърках координатите на снимките. Въпросът ми е как да направя логиката за анимацията на снимките? Имам усещането, че ми трябва нещо като масив или променлива, която да следи координатите на снимките и спрямо това да ги настройва но все още не се сещам как. Друг проблем е, че едната снимка последната в маркъпа не се отмества напълно наляво и си мисля, че може да е заради голямата и дължина.

<!DOCTYPE html>
<html>
  <head>
    <title>Carousel</title>
    <style>
      #carousel-wrap
      {
        width: 100%;
        height: 700px;
      }
	 #carousel
     {
        width: 100%;
        height: 600px;
        position: relative;
        overflow: hidden;
        top: 0px;
        left: 0px;
     }

    #carousel > img
    {
      position: absolute;
      width: 100%;
      height: 600px;
      top: 0px;
      left: 0px;
      margin: 0px;
      padding: 0px;
    }

    #buttons
    {
      position: relative;
      top: 50px;
      z-index: 999;
    }

    </style>
  
  </head>
  <body>
    <div id="carousel-wrap">
  <div id="carousel">
    <img src="people.jpg" />
    <img  src="photo-1427751840561-9852520f8ce8.jpeg" />
    <img src="29929916_391246c.jpg" />
  </div>
 
</div>
<div id="buttons">
  <button onclick="prevImage()">1</button>
  <button onclick="nextImage()">2</button>
</div>
<script   src="https://code.jquery.com/jquery-2.2.4.min.js"   integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="   crossorigin="anonymous"></script>
  <script>
    var counter = 2;
    var pos = 0;
function nextImage()
{
  if (counter > 0)
  {
    $("#carousel img").eq(counter).animate({left:"-=1100px"},1000);
    counter--;
    $("#carousel img").eq(counter).css("left","1100px");
    $("#carousel img").eq(counter).animate({left:"-=1100px"},1000);
    
    // $("#carousel img").eq(1).css('display','none');
    //var n = $("#carousel>img").eq(counter).css("left");
    //var i = parseInt(n);
    
  }
  else
  {
    $("#carousel img").eq(counter).animate({left:"-=1100px"},1000);
    counter = 2;
    //$("#carousel img").eq(counter).css("left","1000px");
    $("#carousel img").eq(counter).animate({left:"+=1100px"},1000);
  }
}

function prevImage()
{
  
  if (counter < 1)
  {
    $("#carousel img").eq(counter).animate({left:"+=1100px"},1000);
    counter++;
    $("#carousel img").eq(counter).css("left","1000px");
    $("#carousel img").eq(counter).animate({left:"-=1000px"},1000);
  }
  else
  {
   $("#carousel img").eq(counter).animate({left:"+=1100px"},1000);
    counter = 0;
    $("#carousel img").eq(counter).css("left","-1000px");
    $("#carousel img").eq(counter).animate({left:"+=1000px"},1000);
 
  }

}
    </script>
  </body>
</html>

Редактирано 20 октомври 20169 г. от frozener (преглед на промените)

Цитирай

21 октомври 20169 г.

Нещо такова ли Ви трябва?

Ако е това, то в примера, който съм дал не се ползва абсолютно позициониране става много тежко и тромаво да движиш n обекта. Аз го правя с отрицателен margin-left на първия елемент(картинка) като стойността може да бъде взета динамично, а не харкод. Има и други начини и не твърдя, че моя е най-добрия.

Цитирай

21 октомври 20169 г.

Автор

преди 1 час, hristonev написа:

Нещо такова ли Ви трябва?

Ако е това, то в примера, който съм дал не се ползва абсолютно позициониране става много тежко и тромаво да движиш n обекта. Аз го правя с отрицателен margin-left на първия елемент(картинка) като стойността може да бъде взета динамично, а не харкод. Има и други начини и не твърдя, че моя е най-добрия.

Да, същото. Еми ти какво си им задал като свойства? Контейнерът за снимка да е с релативна позиция? Overflow: hidden? Щом снимките не са с абсолютно позициониране как си ги подредил една до друга като само актуалната да се вижда? display: inline-block; и overflow: hidden на родителският елемент?

Цитирай

21 октомври 20169 г.

overflow: hidden; + width: {x}px; на контейнера ги нарежда една до друга. Ако искаш им сложи display: inline; но <img> тага по подразбиране е с такова пропърти. Експериментирай, javascripta се вижда, не е jquery ;-).

Редактирано 21 октомври 20169 г. от hristonev (преглед на промените)

Цитирай

21 октомври 20169 г.

Автор

преди 1 минута, hristonev написа:

overflow: hidden; + width: {x}px; на контейнера ги нарежда една до друга. Ако искаш им сложи display: inline; но <img> тага по подразбиране е с такова пропърти. Експериментирай, javascripta се вижда, не е jquery ;-).

Е да ама по принцип, за да задаваш ширина и размер трябва да му дадеш на имиджа display: inline-block, иначе е със 100% ширина като при спановете и хедърите.

Цитирай

21 октомври 20169 г.

Ами, ако предварително съм си го ресайзнал? Това 100% не ми звучи за картинка, да мобилните можеш да пипаш, но по-добре не задавай широчина или височина на картинките, освен при ресайз разбира се.

Цитирай

21 октомври 20169 г.

Автор

преди 35 минути, hristonev написа:

Ами, ако предварително съм си го ресайзнал? Това 100% не ми звучи за картинка, да мобилните можеш да пипаш, но по-добре не задавай широчина или височина на картинките, освен при ресайз разбира се.

Еми аз по принцип им задавам 100%, за да изпълнят конейнера и понеже при кароселите те са широки на 100%.

Цитирай

21 октомври 20169 г.

Става и със 100%, просто аз не го предпочитам :). Иначе термина, който ползваш за първи път го чувам (знам какво е касерола ама то за готвене ). Както казах експериметирай и гледай "out of the box" буквално. Особено с CSS3 имаш толкова функционалности, че може да се направи по десетки начини. Още един коз за CSS3 има едно пропърти transform му казват, там ако се заиграеш се постигат убавини.

Цитирай

22 октомври 20169 г.

Автор

преди 11 часа, hristonev написа:

Става и със 100%, просто аз не го предпочитам :). Иначе термина, който ползваш за първи път го чувам (знам какво е касерола ама то за готвене ). Както казах експериметирай и гледай "out of the box" буквално. Особено с CSS3 имаш толкова функционалности, че може да се направи по десетки начини. Още един коз за CSS3 има едно пропърти transform му казват, там ако се заиграеш се постигат убавини.

Ако не си използвал Bootstrap framework за изграждане на респонсивни сайтове, го виж. Там го използват термина, както и jumbotron. Реално се казва image slider, обаче повечето девове го наричат в днешно време carousel заради тези фреймуъркове които така са си го кръстили нз защо.

Редактирано 22 октомври 20169 г. от frozener (преглед на промените)

Цитирай

22 октомври 20169 г.

Благодаря, но аз съм на принципа да въвеждам толкова код, колкото е нужно. Не обичам излишното разхищение. Повече работя backend в момента. Обаче гледам тенденцията на все по-тежки сайтове. В крайна сметка рано или късно се стига до оптимизация. Сайта, който ти дадох не е точния пример за оптимизация, но въпреки това е сравнително лек.

Цитирай

22 октомври 20169 г.

Автор

преди 5 минути, hristonev написа:

Благодаря, но аз съм на принципа да въвеждам толкова код, колкото е нужно. Не обичам излишното разхищение. Повече работя backend в момента. Обаче гледам тенденцията на все по-тежки сайтове. В крайна сметка рано или късно се стига до оптимизация. Сайта, който ти дадох не е точния пример за оптимизация, но въпреки това е сравнително лек.

Точно бекендаджиите използват Bootstrap, за да не пишат или пишат минимален CSS и в същото време да изглежда хубав UI-а.

Цитирай

22 октомври 20169 г.

преди 2 часа, frozener написа:

Точно бекендаджиите използват Bootstrap, за да не пишат или пишат минимален CSS и в същото време да изглежда хубав UI-а.

Май се бъркаш с Front-End.

Цитирай

22 октомври 20169 г.

Автор

преди 19 минути, Stoyannnov написа:

Май се бъркаш с Front-End.

Ако трябва да сме напълно коректни всеки използва Bootstrap, когато не е добър дизайнер или иска да спести време или да направи бърз UI, за да тестваш форми или други бекенд неща.

Цитирай

22 октомври 20169 г.

@frozener Доста радикално се изказваш . Всеки програмист по - принцип решава кое как да го направи. И ще бъде програмист, след като му бъде зададен въпроса "Защо по този начин?", той даде смислен отговор. Различен от "ми това ползват всички".

Цитирай

22 октомври 20169 г.

Автор

преди 40 минути, hristonev написа:

@frozener Доста радикално се изказваш . Всеки програмист по - принцип решава кое как да го направи. И ще бъде програмист, след като му бъде зададен въпроса "Защо по този начин?", той даде смислен отговор. Различен от "ми това ползват всички".

Прав си, че всеки решава какво да използва и нямах намерение да звуча радикално или дори да предизвикам офтопик дискусия просто ми стана интересно за това, че не си чул термина за слайдера и затова споменах Bootstrap, че оттам както и от други фреймуъркове е станал популярен термина. Също така спирам офтопика понеже наистина доста офтопик се изписа.

Цитирай

Архивирана тема

Темата е твърде стара и е архивирана. Не можете да добавяте нови отговори в нея, но винаги можете да публикувате нова тема, в която да продължи дискусията. Регистрирайте се или влезте във вашия профил за да публикувате нова тема.