организовать слайдер с картинками на разных девайсах

[mstdmstd]

Всем привет,
Делаю верстку с этого ref шаблона

и возник вопрос как лучше организовать слайдер с картинками чтобы картинки нормально отображались на разных девайсах
В примере используется ссылка на http://placehold.it сервис

<div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Three');"></div>

Но в примере текст
Я попробовал подсунуть урл своей локальной картинки
  <div class="fill" style="background-image:url('https://placeholdit.{{ next_settings_sliderImage['image_url'] }}&w=350&h=150');"></div>

И получил ошибку
 

GET https://placeholdit.http//local-wprods.com/uploads/settings/sliders/settings_slider_image_1.png&w=350&h=150 net::ERR_NAME_NOT_RESOLVED
bootstrap.min.js:6 GET https://placeholdit.http//local-wprods.com/uploads/settings/sliders/settings_slider_image_2.png&w=350&h=150 net::ERR_NAME_NOT_RESOLVEDc.slide @ bootstrap.min.js:6c.next @ bootstrap.min.js:6e @ jquery-3.1.0.min.js:2

1) Я так понимаю что этот сервис с локальными сайтами работать не может?

И еще вопросы :
2) если я хочу чтобы был слайдер был картинкой на разных девайсах нужно ли мне для каждой картинки слайдера прописать 4 картинки под каждый девайс
и прятать/отображать их с помощью

 <span class="visible-xs "> ?

3)  Может есть какой более простой и удобный способ для подобного слайдера?

  Спасибо!
 

[npofopr]

14 минуты назад, mstdmstd сказал:

1) Я так понимаю что этот сервис с локальными сайтами работать не может?

а должен? он просто даёт вам свою картинку.

16 минут назад, mstdmstd сказал:

и прятать/отображать их с помощью

не надо так делать.

Есть `img srcset`, можете пользоваться им. Через фоновую картинку тоже есть варианты.  

[mstdmstd]

А можно ссылочку на пример?

[npofopr]

наверно, так https://www.sitepoint.com/how-to-build-responsive-images-with-srcset/