Возможно ли использовать слайдер JSSOR напр. DIV вместо объектов IMG?

Question

Я создаю автоматизированную систему отображения событий для университетского отдела, который создает плакаты на основе данных SQL. Идея состоит в том, чтобы создать как SVG, так и PDF-файлы плаката, чтобы PDF можно было использовать для печати, а SVG может отображаться при автоматическом обновлении отображаемого в сети цифрового дисплея вывесок (OK, OK, телевизор на стене).

У меня есть файлы SVG, отформатированные так, как я их хочу, но когда я попытался использовать библиотеки слайдеров для отображения файлов .svg, форматирование некоторых элементов угасает. Я сузил это до того, что SVG, отображаемые с использованием тега IMG, работают неправильно. Я включил файл в свой собственный DIV, так как это проект HTML5; если я перемещаю «u = изображение» в тег DIV, переход работает нормально, но SVG ломается после завершения перехода (все исходные тексты кажутся сбрасываемыми в верхнем левом углу).

Просто интересно, был ли способ сделать это.

<!-- Slides Container --> 
<div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 764px; height: 1080px; overflow: hidden;"> 

<?php 
    // DATA FROM SEMINARS_DETAIL 
    $query = "SELECT * FROM `seminars_detail` LIMIT 4"; //Date >= NOW() 
    $result = $mysqli->query($query) or die($mysqli->error.__LINE__); 

    if($result->num_rows > 0) { 
      while($row = $result->fetch_assoc()) {  
      $sem_id = $row["sem_id"]; 
      $file = "../images/posters/$sem_id.svg"; 
    //SVG not working properly. 
      echo "<div>"; 
      echo "<img u=\"img\" src=\"$file_th\" />";   
      echo "</div>"; 

    //Compared with... 
    //Transition works, but text origin shifts when transition finishes. 
      echo "<div u=\"image\">"; 
      include $file; 
      echo "</div>";  
     } 
    } else { 
     echo 'NO RESULTS'; 
    } 
?> 
</div> 

Answer 1

Прежде всего, отключите слайд-шоу.

Также, пожалуйста, попробуйте использовать svg в качестве фонового изображения.

<div u="slides" ...> 
    <div style="background-image: url(l.svg);"></div> 
    <div style="background-image: url(2.svg);"></div> 
    <div style="background-image: url(3.svg);"></div> 
</div>