• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Wyświetlanie karty przez prosty slajder js ale tylko te które będą mieściły w żądanym czasie

Object Storage Arubacloud
0 głosów
333 wizyt
pytanie zadane 17 grudnia 2022 w JavaScript przez gatka84 Bywalec (2,150 p.)
edycja 19 grudnia 2022 przez gatka84

Witajcie mam prostego slajdera który wyświetla dane przez php z bazy i teraz kombinuje jak zrobić żeby dane były wyświetlane (a dokładnie konkretna karta z tymi danymi) przez określony czas tzn, np zaznaczam że ma być od 12-12-2022 do 15-12-2022 się wyświetlać i po tym czasie już nie i przed tym czasem też nie i mam problem bo nie bardzo umiem wykombinować jak ukryć karty(div) żeby był pomijany przez slajdera jeśli nie spełni tych kryteriów

<section id="news">
  <div class="blog-slider">
    <div class="do-wybrania">
      <div class="blog-slider__item" data-start="<?= $homeInfoo['info_add']; ?>" data-stop="<?= $homeInfoo['info_end']; ?>">    
       <div class="blog-slider__img ">
          <img src="" alt="">
        </div>
        <div class="blog-slider__content">
          <span class="blog-slider__code"></span>
          <div class="blog-slider__title"></div>
          <div class="blog-slider__text">test</div>
        </div>
      </div>
      <?php
      $homeInfo = "SELECT * FROM info WHERE status='0' LIMIT 6";
      $homeInfo_run = mysqli_query($con, $homeInfo);
      if (mysqli_num_rows($homeInfo_run) > 0) {
        foreach ($homeInfo_run as $homeInfoo) {
      ?>
          <div class="blog-slider__item">
            <div class="blog-slider__img">
              <img src="./files/info/<?= $homeInfoo['image']; ?>" alt="<?= $homeInfoo['title']; ?>">
            </div>
            <div class="blog-slider__content">
              <span class="blog-slider__code"><?= $homeInfoo['data_info']; ?></span>
              <div class="blog-slider__title"><?= $homeInfoo['title']; ?></div>
              <div class="blog-slider__text"><?= $homeInfoo['text']; ?></div>
            </div>
          </div>
      <?php }
      } ?>
    </div>
    <div class="blog-slider__pagination">
      <div class="prev_info"><i class="fa fa-chevron-circle-left" style="font-size: 28px;color:aqua; cursor: pointer;"></i></div>
      <div class="next_info"><i class="fa fa-chevron-circle-right" style="font-size: 28px; color:aqua; cursor: pointer;"></i></div>
    </div>
  </div>
  </div>
</section>

jest obsługiwane przez

const info = document.querySelector(".do-wybrania").children;
const prev_info = document.querySelector(".prev_info");
const next_info = document.querySelector(".next_info");
let indexx = 0;
function autoPlay(){
next_infoSlide();
//   updateDotIndicator();
}
function next_infoSlide(){
  if (indexx == info.length - 1) {
    indexx = 0;
  }
  else{
    indexx++;
  }
  changeSlide();
}
function changeSlide(){
  for(let i=0; i < info.length; i++){
    info[i].classList.remove("active");
  }
  info[indexx].classList.add("active");
}
let timer_info = setInterval(autoPlay, 6000);
function prev_infoSlide(){
    if (indexx == 0) {
    indexx = info.length - 1;
    }
    else{
    indexx--;
    }
    changeSlide();
}
prev_info.addEventListener("click", function(){
    prev_infoSlide();
    //updateDotIndicator();
    resetTimer_info();
    })
    next_info.addEventListener("click", function(){
    next_infoSlide();
    //updateDotIndicator();
    resetTimer_info();
    })    
    function resetTimer_info(){
    clearInterval(timer_info);
    timer_info = setInterval(autoPlay, 5000);
    }

i teraz nie wiem jak do tego dodać

const HOURS_24x = 24 * 60 * 60 * 1000;
window.addEventListener('DOMContentLoaded', loadx);
function loadx() {
  const elements = document.querySelectorAll('.blog-slider__item .blog-slider__content span:first-child');
 
  for (const element of elements) {     
    const arrMinTime = element.closest('.blog-slider__item').dataset.start.split('-'),
          arrMaxTime = element.closest('.blog-slider__item').dataset.stop.split('-'),
          minTime = new Date(arrMinTime[2], parseInt(arrMinTime[1], 10) - 1, arrMinTime[0]),
          maxTime = new Date(arrMaxTime[2], parseInt(arrMaxTime[1], 10) - 1, arrMaxTime[0]),
          offTime = new Date(maxTime.getTime() + HOURS_24x),
          curTime = Date.now();
    if (curTime >= minTime.getTime() && curTime <= offTime.getTime())
    element.closest('div.blog-slider__item').classList.remove('hidex');
    else
    element.closest('div.blog-slider__item').classList.add('hidex');
  } 
}

którego zadaniem było by sprawdzanie daty jeśli jest w przedziale to wyświetli div jeśli nie to będzie ukryty i tu zaczęły się schody tzn nie umiem wykombinować jak ukryć żeby był pomijany przy karuzeli a nie pokazywał puste tło i czas odlicza jak by był nie wiem jak zrobić ifa lub warunek który by to sprawdzał i w każdej pętli korygował, albo od złej strony kombinuje,

Będę wdzięczna za podpowiedzi lub przykłady jak to ugryźć

1 odpowiedź

0 głosów
odpowiedź 18 grudnia 2022 przez VBService Ekspert (253,420 p.)
edycja 18 grudnia 2022 przez VBService

ps swiper dubluje karty tzn są dwie w bazie

w bazie masz jedną wersję danych do karty i dublowanie kart to też nie jest wina swiper-a, dublowanie kart pochodzi z php z tego "kawałka" kodu

      $homeInfo_run = mysqli_query($con, $homeInfo);
      if (mysqli_num_rows($homeInfo_run) > 0) {
        foreach ($homeInfo_run as $homeInfoo) { ...

 

zamiast tego kodu

      <?php
      $homeInfo = "SELECT * FROM info WHERE status='0' LIMIT 6";
      $homeInfo_run = mysqli_query($con, $homeInfo);
      if (mysqli_num_rows($homeInfo_run) > 0) {
        foreach ($homeInfo_run as $homeInfoo) {
      ?>
          <div class="blog-slider__item swiper-slide hide_info" id="info_news" data-start="<?= $homeInfoo['info_add']; ?>" data-stop="<?= $homeInfoo['info_end']; ?>">
            <div class="blog-slider__img">
              <img src="./files/info/<?= $homeInfoo['image']; ?>" alt="<?= $homeInfoo['title']; ?>">
            </div>
            <div class="blog-slider__content">
              <span class="blog-slider__code"><?= $homeInfoo['data_info']; ?></span>
              <div class="blog-slider__title"><?= $homeInfoo['title']; ?></div>
              <div class="blog-slider__text"><?= $homeInfoo['text']; ?></div>
            </div>
          </div>
          <?php }
      } ?>

zapisz dla testu tak i zobacz jaki wyniki zostanie zwrócony

      <?php
      $homeInfo = "SELECT * FROM info WHERE status='0' LIMIT 6";
      $homeInfo_run = mysqli_query($con, $homeInfo);
      if (mysqli_num_rows($homeInfo_run) > 0) {
        var_dump($homeInfo_run);
      }
      ?>

najczęściej spotykany sposób na iterowanie danych zwróconych z bazy danych (mysqli_fetch_assoc)

while ($row = mysqli_fetch_assoc($homeInfo_run)) {
    echo $homeInfoo['info_add']; // itd.
}

lub

$homeInfo_rows =  mysqli_fetch_assoc($homeInfo_run);
foreach ($homeInfo_rows as $homeInfoo) {
    echo $homeInfoo['info_add']; // itd.
}

 

komentarz 20 grudnia 2022 przez gatka84 Bywalec (2,150 p.)
i tu cały czas natrafiam na problem jak w slaiderze pominąć class="blog-slider__item"  z  style="display: none;"
komentarz 21 grudnia 2022 przez VBService Ekspert (253,420 p.)

Hymmm,

zamień

const info = document.querySelector(".do-wybrania").children;

na

const info = document.querySelectorAll('.do-wybrania .blog-slider__item:not([style*="display: none"])');

 

komentarz 21 grudnia 2022 przez gatka84 Bywalec (2,150 p.)

niestety nie działa :( tzn dział tak jak przedtem bez pomijania tych z dispaly: none

co daje * w tym zapisie

[style*="display: none"]

 

<div class="do-wybrania">
                      <div class="blog-slider__item" data-start="18-12-2022" data-stop="20-12-2022" id="blog">
            <div class="blog-slider__img">
              <img src="./files/info/1654094479.png" alt="">
            </div>
            <div class="blog-slider__content" id="to">
              <span class="blog-slider__code">20-12-2022</span>
              <div class="blog-slider__title">wiadomość</div>
              <div class="blog-slider__text"></div>
            </div>
          </div>
                <div class="blog-slider__item active" data-start="20-12-2022" data-stop="24-12-2022" id="blog" style="display: none;"> // <-- dopisał active pomimo dispaly:none
            <div class="blog-slider__img">
              <img src="./files/info/1654103601.png" alt="">
            </div>
            <div class="blog-slider__content" id="to">
              <span class="blog-slider__code">31-05-2022 </span>
              <div class="blog-slider__title"></div>
              <div class="blog-slider__text"></div>
            </div>
          </div>
          </div>

 

komentarz 21 grudnia 2022 przez VBService Ekspert (253,420 p.)

co daje * w tym zapisie

CSS [attribute*=value] Selector

komentarz 21 grudnia 2022 przez gatka84 Bywalec (2,150 p.)

ok dziękuje za informację

kombinowałam jeszcze tak że w pierwszej kolejności funkcja sprawdzająca czas dodaje klasę

if (curTime >= offTime.getTime())
        pelement.closest('#blog').classList.add("test");

a następnie

w funkcja slajdera zadziała jeśli znajdzie klasę

const info = document.querySelectorAll(".do-wybrania .test");

ale tak to już w cale nie działa tzn już się nie przełącza na następną kartę z klasą test

Podobne pytania

0 głosów
2 odpowiedzi 107 wizyt
pytanie zadane 11 kwietnia 2017 w JavaScript przez shslr Obywatel (1,310 p.)
0 głosów
1 odpowiedź 484 wizyt
0 głosów
1 odpowiedź 276 wizyt

92,579 zapytań

141,432 odpowiedzi

319,664 komentarzy

61,964 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...