Menu
I used slick js for slider view of image.
Here is my code.
<div class="slider_wrap add-remove"> <%= f.fields_for :images do |image_form| %> <%#= render 'images_fields', :f => image_form %> <div> <%= image_tag image_form.object.picture.url,:class=>"drop_down_link even img_prev" %> </div> <div class="image_upload_div"> <div class="image-upload"> <label> <i class="fa fa-cloud-upload"> <%= image_form.file_field :picture ,:'data-role'=>"none",:onchange=>"readURL(this);" , :accept => 'image/jpeg , image/png' %> </i> </label> </div> </div> <% end %> <%= f.link_to_add "Add a picture", :images ,:id=>"add_pic" ,:class=>"js-add-slide", :style=>"display: none;"%> </div> <script> function silder(){ slideIndex = 0; $('.add-remove').slick({ slidesToShow: 2, slidesToScroll: 2 }); $('.js-add-slide').on('click', function() { $('.add-remove').slick('slickAdd'); }); $('.js-remove-slide').on('click', function() { $('.add-remove').slick('slickRemove'); }); }); function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('.img_prev').last() .attr('src', e.target.result) }; reader.readAsDataURL(input.files[0]); setTimeout(function(){ $('#add_pic').trigger('click'); silder(); }, 100); } } </script> Now with this code I got slider working, but its not coming proper I am getting error:
Uncaught TypeError: Cannot read property 'add' of null
882
The "Cannot read property 'click' of null" error occurs when trying to call the click method on a null value. To solve the error, run the JS script after the DOM elements are available and make sure you only call the method on valid DOM elements.
After calling an request, set timeout to initialize slick slider. Do not initialize slick slider at start. Just initialize after an AJAX with timeout. That should work for you.
The "Cannot read properties of undefined" error occurs when trying to access a property on an undefined value. You often get undefined values when: accessing a property that does not exist on an object. accessing an index that is not present in an array.
You can also link to another Pen here (use the . css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
That's due to calling init twice. This works without error:
$(".slider").not('.slick-initialized').slick() Also, "silder" looks like a typo.
Relying on a timeout is also error-prone. Unfortunately, Internet Explorer uses a different event to tell you when the HTML elements and JS libraries have been loaded. There are many libraries to avoid the 100 or so lines of cross-browser code, but the popular and relatively small jQuery solves the timing issue like this:
$(function() { // Handler for .ready() called. Put the Slick Slider etc. init code here. }) If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
